Element Plus分页点击页码后数据不更新怎么办？

皇甫怡平提问于 2026-01-30 20:27:29 阅读 38

组件

用Element Plus的Pagination分页组件做列表页，页码点击后current-change事件能触发，但数据没变化，页面还是第一页内容。

已经按文档写了current-page绑定和@current-change方法，也调用了获取数据的API，但切换页码后数据没更新，控制台没报错。

这是我的代码：


<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="total"
  @current-change="handlePageChange"
/>


data() {
  return {
    currentPage: 1,
    listData: []
  }
},
methods: {
  handlePageChange(page) {
    this.currentPage = page
    this.fetchData() // 这个方法能正常获取数据
  }
}

数据请求成功后listData确实有新值，但页面渲染还是第一页内容，好像数据没重新渲染？

我来解答赞 12 收藏

反馈

1 条解答

极客令敏 Lv1

应该是 listData 没有触发视图更新，试试在 fetchData 里用 this.$set 或直接重新赋值。如果还是不行，确保 API 返回的数据格式正确。

methods: {

  handlePageChange(page) {

    this.currentPage = page

    this.fetchData()

  },

  fetchData() {

    api.getData({ page: this.currentPage }).then(res => {

      this.listData = res.data // 确保这里是新数组，不要修改原数组

    })

  }

}

最后检查下是不是 listData 在模板里没绑定到正确的组件属性上。

2026-01-30 23:00