Naive UI 的表格分页怎么不生效？

百里梓豪提问于 2026-03-14 18:05:23 阅读 53

框架

我在用 Naive UI 的 NDataTable 组件，数据明明有几十条，但分页控件完全没反应，点下一页还是显示全部数据。我是不是哪里配错了？

我已经设置了 pagination 属性，也绑定了 page 和 pageSize，但好像没起作用。下面是我的代码：

const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50],
  onChange: (page) => {
    pagination.page = page
  },
  onUpdatePageSize: (pageSize) => {
    pagination.pageSize = pageSize
    pagination.page = 1
  }
})

模板里是这么写的：

<n-data-table
  :columns="columns"
  :data="tableData"
  :pagination="pagination"
/>

但表格还是把所有数据一次性渲染出来了，分页器虽然显示了，但点击无效。是不是还要手动切片数据？官方文档里好像没提这一步……

Naive UI

我来解答赞 7 收藏

反馈

1 条解答

司马爱娜 Lv1

兄弟，你这个分页不生效，大概率是数据没切的问题。

Naive UI 的 NDataTable 默认是服务端分页模式，也就是说它不会自动帮你切数据。你传进去多少条，它就渲染多少条，分页器点来点去只是触发回调，但你没在回调里做数据切片，那表格当然纹丝不动。

两种解决思路：

第一种，想用客户端分页（数据一次性全给你）：

const pagination = reactive({

  page: 1,

  pageSize:10,

  pageCount: null,  // 必须设为 null

  server: false,    // 关键！关闭服务端分页

  showSizePicker: true,

  pageSizes: [10, 20, 50]

})

把 server 设为 false，然后 pageCount 设为 null，这样组件才会自己在客户端切数据。

第二种，服务端分页（数据量大，后端返回当前页的数据）：

你需要在回调里自己处理：

const pagination = reactive({

  page: 1,

  pageSize: 10,

  server: true,  // 明确告诉组件是服务端分页

  showSizePicker: true,

  pageSizes: [10, 20, 50],

  onChange: (page) => {

    pagination.page = page

    loadData()  // 你自己的请求方法

  },

  onUpdatePageSize: (pageSize) => {

    pagination.pageSize = pageSize

    pagination.page = 1

    loadData()

  }

})



async function loadData() {

  const res = await fetch(/api/your endpoint?page=${pagination.page}&size=${pagination.pageSize})

  tableData.value = res.data

}

简单说就是：server: false 让组件自己切数据，server: true 你自己切数据。你没设 server 的话，默认是 true，所以它就等着你自己处理。

自己看下你是哪种场景，配置改一下就完事儿。

2026-03-17 13:09