vue3纯前端分页

    const getTabelData2 = () => {
    //state.simDataList 为你的数据
    //state.tableData 新的放分页后的数据
      let data = JSON.parse(JSON.stringify(state.simDataList))
      state.tableData = data.splice(
        (state.page - 1) * state.size,
        state.size
      );
      state.total = state.simDataList.length
    };

 const currentChange = (val: any) => {
      state.page = val;
      getTabelData2();
    };

 //size改变时回调的函数，参数为当前的size
      sizeChange(val: number) {
        state.size = val;
        state.page = 1;
        getTabelData2()
      },

分页组件

  <el-pagination
          class="page"
          background
          layout="total, sizes, prev, pager, next, jumper, ->"
          :current-page="page"
          :page-sizes="pageSizes"
          :page-size="size"
          :total="total"
          @current-change="currentChange"
          @size-change="sizeChange"/>

 simDataList: [{iccid: ''}],
      tableData: [{iccid: ''}],
      rechargeVisible: false,
      page: 1, //第几页
      size: 10, //一页多少条
      total: 0, //总条目数
      pageSizes: [10, 20, 50, 100, 200, 300, 400, 500, 1000],