Naive UI之数据表格分页pagination

数据列表分页全部代码:

<n-data-table
        ref="tableRef"
        striped
        :columns="columns"
        :pagination="pagination"
        :bordered="false"
        :data="tableData"
        :row-key="row => row.name"
        remote
        v-model:checked-row-keys="checkedRowKeys"
      >
      </n-data-table>

//分页
const pagination = reactive({
  page: 1, //受控模式下的当前页
  pageSize: 10, //受控模式下的分页大小,每一页的数据大小
  showSizePicker: true, //是否显示每页条数
  pageSizes: [10, 20, 50], //每页条数,可自定义
  showQuickJumper: true,
  pageCount: 0,
  itemCount: 0, //总条数
  prefix: () => { //分页前缀
    return '共 ' + pagination.itemCount + ' 项';
  },
  onChange: page => { //切换第几页时
    pagination.page = page;
    getTableData();
  },
  onPageSizeChange: pageSize => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
    getTableData();
  },
});