Naive UI 的表格分页怎么和后端数据联动？

A. 雨帆提问于 2026-02-26 17:31:20 阅读 16

框架

我用 Naive UI 的 NDataTable 做了个表格，现在想实现分页功能，但文档里只说了怎么配置分页组件，没讲怎么和后端接口配合。比如我点第二页，怎么自动请求第 2 页的数据？

我试过把 page 和 pageSize 绑定到 data 里，然后在 watch 里调接口，但总感觉写法很别扭，而且切换页码时页面会闪一下。有没有更标准的做法？

const page = ref(1)
const pageSize = ref(10)

watch([page, pageSize], () => {
  fetchData({ page: page.value, pageSize: pageSize.value })
})

Naive UI UI框架

我来解答赞 1 收藏

反馈

1 条解答

程序员成立 Lv1

省事的话直接用 NDataTable 的 onUpdate:page 和 onUpdate:page-size 事件，别自己 watch，组件会自动传新页码和页大小给你：

const handlePageChange = (page, pageSize) => {

  fetchData({ page, pageSize })

}



const columns = [

  // ...

]



const data = ref([])

const pagination = ref({

  page: 1,

  pageSize: 10,

  total: 0

})



onMounted(() => {

  fetchData({ page: pagination.value.page, pageSize: pagination.value.pageSize })

})



const fetchData = async ({ page, pageSize }) => {

  const res = await api.getList({ page, pageSize })

  data.value = res.list

  pagination.value.total = res.total

}

然后模板里：

<NDataTable

  :columns="columns"

  :data="data"

  :pagination="pagination"

  @update:page="handlePageChange"

  @update:page-size="handlePageChange"

/>

2026-02-26 18:03