NaiveUI的Table表分页配置

因为 NaiveUI 的 DataTable 数据表格组件支持 pagination 参数,所以我一直固定使用这个模板来作为分配配置,而不需要后端来分页

:::tip
参考代码,在代码中,你无需关注他是怎么实现的,只需要定义好pagination对象,并且配置到数据表格组件中的 pagination 参数即可
:::

<template>
  <n-data-table :pagination="pagination" />
</template>

<script setup>
const pagination = {
  prefix({ itemCount }) {
    return `总计 ${itemCount} 条数据`;
  },
  pageSizes: [
    {
      label: "默认10条",
      value: 10,
    },
    {
      label: "全部显示",
      value: 9999,
    },
    {
      label: "20 每页",
      value: 20,
    },
    {
      label: "30 每页",
      value: 30,
    },
    {
      label: "40 每页",
      value: 40,
    },
  ],
  showSizePicker: true,
  displayOrder: ["quick-jumper", "pages", "size-picker"],
};
</script>