vue 假分页

vue3

    const pageContent = reactive({
      cur: 1,
      total: 0,
      pageSize: 5,
      handleSizeChange(val: number) {
        // console.log(val);
        pageContent.pageSize = val;
        pageContent.cur = 1;
        let curList = curItem!.value?.partnershipCollectionList![0].mguCollectionList;
        tableConfig.value = createConfig(true, curList?.slice(0, pageContent.pageSize));
      },
      handleCurrentChange(val: number) {
        // console.log(val);
        val = (val - 1) * pageContent.pageSize;
        let curList = curItem!.value?.partnershipCollectionList![0].mguCollectionList;
        tableConfig.value = createConfig(true, curList?.slice(val, val + pageContent.pageSize));
      }
    });

因某原因，后端一次性返回所有数据，无分页字段，只能自己实现假分页。
需要准备俩个数组。一个展示，一个分割
组件

  <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 10, 300, 400]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
        >
        </el-pagination>
      </div>

 			// 总数据就是总页数
			this.totalPage = this.list.length
            // 给加分页列表初始化
            let temp = JSON.parse(JSON.stringify(this.list))
            // 因为splice不是纯函数会改变源数据结果这里temp一下，记得Stringify不然也会改变源数据
            this.pageList =  temp.splice(0,this.pageSize)

    handleSizeChange(val) {
      // 只要换页数就直接返回1页
      this.pageSize = val;
      this.currentPage = 1;
      this.pageList = this.list.slice(0, this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (val == 1) {
        this.pageList = this.list.slice(0, this.pageSize);
        return;
      }
      // 当前页 - 1 * 页数 = 分割开始数 比如二页 - 1  = 1*page
      val = (val - 1) * this.pageSize;
      // 分割结束数 = 分割开始数 + this.pageSize
      this.pageList = this.list.slice(val, val + this.pageSize);
    },