元素
元素
工具
博客
问答

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

皇甫怡平 阅读 55
组件

用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确实有新值，但页面渲染还是第一页内容，好像数据没重新渲染？

我来解答 赞 16 收藏
二维码
手机扫码查看
反馈
2 条解答
浩宇酱~
浩宇酱~ Lv1
看起来你在使用 Element Plus 的 Pagination 组件时遇到了数据不刷新的问题。虽然 current-change 事件触发了，数据也获取了，但是页面显示的内容没有更新。这通常是由于 Vue 的响应式系统没有正确追踪到数据的变化。

首先检查一下 fetchData 方法里获取的数据是否正确地赋值给了 listData。确保在数据请求成功后的回调函数里做了类似这样的操作：

methods: {

  fetchData() {

    // 模拟异步请求

    setTimeout(() => {

      this.listData = [/* 新数据 */];

    }, 1000);

  },

  handlePageChange(page) {

    this.currentPage = page;

    this.fetchData();

  }

}


其次，确保你的模板里正确绑定了 listData。比如，如果你在用一个 v-for 循环来渲染列表，检查下循环的数据源是不是 listData：

<ul>

  <li v-for="(item, index) in listData" :key="index">{{ item }}</li>

</ul>


最后，如果问题依然存在，可以尝试强制更新组件。不过这通常不是最佳实践，但如果确实需要，可以使用 this.$forceUpdate() 来强制组件重新渲染。但要注意，滥用这个方法可能会掩盖其他潜在的问题。

注意安全：在处理用户输入或者从服务器获取的数据时，确保进行适当的验证和清理，防止 XSS 或其他安全问题。
点赞
2026-03-21 21:11
极客令敏
极客令敏 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 在模板里没绑定到正确的组件属性上。
点赞 14
2026-01-30 23:00
相关推荐
元素
元素
工具
博客
问答
登录/注册