分页组件切换页码后数据没更新，是怎么回事？

___素红提问于 2026-02-04 10:23:36 阅读 79

组件

在做列表分页时用了ant-design的Pagination组件，切换页码后控制台能看到请求参数正确，但页面数据还是第一页的内容。

代码结构是这样的：current={currentPage}绑定了数据，点击页码时触发handlePageChange方法：


handlePageChange(page) {
  this.currentPage = page;
  this.fetchData(page); // 调用数据请求方法
}

数据请求用axios封装的，返回数据后直接赋值给items数组。尝试过加setTimeout模拟延迟发现数据确实没变，但控制台打印的请求参数是正确的。

之前试过把currentPage改成计算属性，或者在fetchData里加console.log(page)，发现参数是传进去了。是不是需要手动触发更新？或者分页组件有什么特别的使用方式？

反馈组件

我来解答赞 16 收藏

反馈

2 条解答

泽铭 Dev Lv1

哈这个bug我之前也碰到过！antd的Pagination组件确实有点小坑。关键问题在于你虽然改了currentPage但可能没触发组件重新渲染。

试试这样改：

handlePageChange(page) {
this.currentPage = page;
this.fetchData(page);
this.$forceUpdate(); // 手动触发更新
}

或者更好的做法是确保你的items数组在赋值时是全新对象，而不是直接修改：

fetchData(page) {
axios.get(url).then(res => {
this.items = [...res.data]; // 这里用展开运算符创建新数组
})
}

有时候Vue/React的响应式系统检测不到数组的直接修改，所以要用新对象赋值。你可以先试第一种简单方法，不行的话再用第二种。

另外检查下你的template里是不是正确绑定了items数据，有时候模板里写错变量名也会导致不更新。

2026-03-05 16:05

IT人志丹 Lv1

你currentPage改了但没触发请求，分页组件current要绑定到响应式数据上。改成这样：

data() {

  return {

    currentPage: 1,

    items: []

  }

},

methods: {

  handlePageChange(page) {

    this.currentPage = page

    this.fetchData(page)

  },

  fetchData(page) {

    // 你的请求逻辑

  }

}

2026-02-04 11:01