antd分页器

实现效果图：

实现代码：

 //template
 <l-table
        :key="'showPurchaseOrder' + '/' + '1'"
        :id="'showPurchaseOrder' + '/' + '1'"
        :columns="stastic.tableColumn"
        rowKey="purchaseOrderId"
        :scroll="{ x: 1000, y: 400 }"
        :dataSource="stastic.tableData"
        :hideTableHead="true"
      >
        <template #bodyCell="{ record, dataIndex, index }">
          <!-- 序号 -->
          <div v-if="dataIndex == 'index'">
          	...
          </div>
        </template>
 </l-table>
 <Pagination
      style="margin-top: 10px;"
      :page="stastic.page.current"
      :size="stastic.page.size"
      :total="stastic.page.total"
      @changePage="pageChange"
      @sizeChange="(e:any) => {stastic.page.size = e;}"
    ></Pagination>

const stastic = reactive({
  tableData: [] as any,
  tableDataAll: [] as any,
  page: {
    current: 1,
    size: 40,
    total: 0,
  },
  ....
 
//分页器页数变化的回调
const pageChange = (currentPage: number) => {
  stastic.page.current = currentPage;
  stastic.tableData = stastic.tableDataAll.slice(
    (currentPage - 1) * stastic.page.size,
    currentPage * stastic.page.size
  );
};

//获取表格数据
const initData = () => {
  stastic.recordData = JSON.parse(String(route?.params?.list));
  ...
  stastic.tableDataAll = stastic.recordData;
  stastic.page.total = stastic.tableDataAll.length;
  pageChange(1);
};