vue假分页 elementui

应为某状态缘故/此页面的列表数据后端一次性返回/担心将来数据太多/so 前端做个假分页

   <!-- 分页器 -->
    <div class="pagination-wrap">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>

点击页码

    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.tableData = this.list.slice(0, this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (val == 1) {
        this.tableData = this.list.slice(0, this.pageSize);
        return;
      }
      // 当前页 - 1 * 页数 = 分割开始数 比如二页 - 1  = 1*page
      val = (val - 1) * this.pageSize;
      // 分割结束数 = 分割开始数 + this.pageSize
      this.tableData = this.list.slice(val, val + this.pageSize);
    },

data默认数据

      totalCount: 0,
      pageSize: 10,
      currentPage: 1, //当前页码

这是数据请求方式

    async get_persoMent() {
      let Params = {
        floor: this.formInline.floor || null, //楼层
        dormitoryNo: this.formInline.dormitoryNo || null, //宿舍编号
        name: this.formInline.name || null, //姓名
        phoneNumber: this.formInline.phoneNumber || null, //手机号
        isCheckOut: this.formInline.isCheckOut
      };
      const res = await persoMent(Params);
      if (res.data) {
        // this.tableData = res.data;
        this.list = res.data;
        this.totalCount = res.data.length;
        let temp = JSON.parse(JSON.stringify(this.list));
        this.tableData = temp.splice(0, this.pageSize);//此为列表的数组
      } else {
        this.$message(res.data.message || "内容为空");
      }
    }

css

<style scoped lang="scss">
.pagination-wrap {
  display: flex;
  margin: 20px 0;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding-left: 30px;
  .el-pagination__jump,
  .el-pagination__total {
    font-size: 13px !important;
    font-family: PingFangSC-Regular, PingFang SC !important;
    font-weight: 400 !important;
    color: rgba(51, 51, 51, 1) !important;
  }
}

.el-input__inner:hover {
  border-color: #0093cd !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #0087e3;
  // background: rgba(255, 145, 23, 1);
}

.el-pager li.active {
  color: #fff;
  // background: rgba(255, 145, 23, 1);
  background: #0087e3;
  border-radius: 2px;
}
</style>

``  `