vue3中antd表格table自带分页的基础用法

首先在table中注册分页pagination

<Table
          class="ant-table-striped mt-2"
          size="middle"
          :columns="tableData.columns"
          :data-source="tableData.data"
          :pagination="pagination"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          bordered
        >

在setup下写分页配置及页数改变方法

  import { reactive } from 'vue';

   //分页
    const pagination = reactive({
      // 表格分页的配置
      current: 1,
      pageSize: 10,
      showSizeChanger: true, // 用于控制展示每页多少条的下拉
      showQuickJumper: true,
      total: 0,
      pageSizeOptions: ['10', '20', '50'],
      showTotal: (total) => `共 ${total} 条`,
      onShowSizeChange: pageSizeChange,
      onChange: pageChange
    })

分页请求方法：

const handleGetPage = async () => {
    const params = {
      current: pagination.current,
      size: pagination.pageSize,
      sortField: 'createTime',
      sortOrder: 'ascend',
    };

    const _data = await getItemcontractPage(params);
    const { data } = _data;
    const { records } = data;
    pagination.total = data.total;
   
    tableData.value.data = records.map((item, i) => {
      return { ...item, index: i + 1 };
    });
  };