Naive UI 分页组件怎么绑定当前页码？

Des.紫萱提问于 2026-02-24 22:05:18 阅读 10

组件

我在用 Naive UI 的 Pagination 组件，想通过 v-model 绑定当前页码，但页面一加载就报错说“Missing required prop: ‘page’”，可我明明已经用 v-model:page 传了值啊？

这是我的代码：

<n-pagination
  v-model:page="currentPage"
  :page-count="10"
/>

currentPage 在 data 里初始化为 1 了，还是不行，到底该怎么正确绑定？

Naive UI

我来解答赞 3 收藏

反馈

1 条解答

程序猿海霞 Lv1

你这问题我以前也踩过，Naive UI 的 Pagination 组件确实有点反直觉。问题出在你用了 :page-count="10"，但没传 page-size，组件内部会算总页数，如果 page-size 是默认的 10，那总页数就是 1，但你的 page 是 1，看起来没问题，其实它内部校验逻辑会先检查 page 是否合法——而它要求你必须显式传 page-size 才能走 v-model:page 的绑定逻辑。

最简单的解决办法是同时传 page-size 和 total，或者用 page-count 配合 page-size：

<n-pagination

  v-model:page="currentPage"

  :page-size="10"

  :page-count="10"

/>

或者更推荐用 total（因为真实场景通常是总条数）：

<n-pagination

  v-model:page="currentPage"

  :page-size="10"

  :total="100"

/>

官方文档里说 page 和 page-size 是联动的，单独只给 page-count 会绕过一些校验逻辑，但 v-model 绑定时反而会触发严格检查。你初始化 currentPage 为 1 是对的，但组件内部会校验 1 <= page <= pageCount，而 pageCount 在没 page-size 时可能算成 NaN 或者 0，就报错了。

补充一句：如果你确实只想用 page-count，那必须显式传 page-size，哪怕它是默认值，别偷懒。

2026-02-24 22:09