Arco Design分页组件怎么绑定当前页码变化事件？

东俊 Dev 提问于 2026-02-24 08:33:18 阅读 36

组件

我在用 Arco Design 的 Pagination 组件，想在用户切换页码时拿到新的 currentPage 值，但 on-change 事件好像没触发？我照着文档写了，但控制台啥也没打印。

这是我的代码：

const handlePageChange = (current) => {
  console.log('当前页：', current);
};

// 模板里这样用
// <a-pagination :total="100" :current="currentPage" @change="handlePageChange" />

我来解答赞 8 收藏

反馈

2 条解答

书生シ秋香 Lv1

省事的话直接用 @update:current 事件，Arco Design 的 a-pagination 默认不触发 @change，得用这个：

<a-pagination :total="100" :current="currentPage" @update:current="handlePageChange" />

或者干脆去掉 :current 双向绑定，让它自己管状态：@change="handlePageChange" 就能触发了。

2026-02-27 15:03

萍萍 Lv1

你这个写法基本没问题，但 Arco Design 的 Vue 版本里，的 change 事件确实要绑定对，而且得注意是不是受控模式下漏了更新 current。

先确认你是不是用了 :current="currentPage" 这种受控写法，如果是，那光绑定 @change 不够，你得在 handlePageChange 里同步更新 currentPage，否则组件不会重新渲染，也不会触发后续逻辑（虽然 change 应该还是会触发的，但有时候会误判）。

直接用这个试试：

const currentPage = ref(1)



const handlePageChange = (current) => {

  console.log('当前页：', current)

  currentPage.value = current

}

模板里：

<a-pagination

  :total="100"

  :current="currentPage"

  @change="handlePageChange"

/>

如果还是不触发，检查下有没有其他地方手动改了 currentPage 但没触发 change，或者是不是用了 default-current 混用了受控和非受控模式。

还有个坑：Arco 的 Vue 版本（v2+）里，change 事件签名是 (current, pageSize)，你函数里只写 current 也没问题，但别写错参数名。

再不行就打印下组件是不是真的渲染出来了，有时候 import 错包或者命名冲突也会导致组件不工作。

2026-02-24 09:01