使用el-pagination，页码（current-page）视图不更新

wwwwait___

已于 2023-08-09 16:53:07 修改

阅读量1.9k

点赞数 6

CC 4.0 BY-SA版权

文章标签： elementui 前端 javascript

于 2023-08-08 15:17:02 首次发布

本文链接：https://blog.csdn.net/W________11/article/details/132167438

文章讲述了作者在使用ElementUI的分页组件时遇到的问题，即current-page值变化但页面未更新，原因是列表获取前将total属性重置为0导致的。解决方案是确保在获取数据后再设置total。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上搜，发现好多人遇到了类似的问题，

但是按照他们解决的方法，

使用.sync
Vue的el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题[已解决]_:current-page.sync_桔梗的犬夜叉的博客-CSDN博客
绑定基本类型的变量，不绑定对象中的变量
Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑_onebyte8bits的博客-CSDN博客
赋值前强转为Number型
延迟赋值
vue3中使用elementui，分页currentpage显示页码不更新视图_elment组件的分页组件的current-page不能改变页数_诗意的前端工匠的博客-CSDN博客

都没有解决……

后来发现是，在getList的时候，为了偷懒，在发请求之前把分页器绑定的total属性，重置为0，导致分页器组件崩掉了....

async getList() {
  this.list = []
  this.count = 0  // 罪魁祸首
  const result = await ... // 调用接口
  
  // 错误，提示
  if (result.code !== '200') {
    this.$message({
      showClose: true,
      message: result.msg,
      type: 'error'
    })
    return
  }
  // 成功，但无相应数据
  if (....) {
    ...
    return
  }
  // 成功，渲染数据
  this.list = result.data
  this.total = result.count
}

家人们，别偷懒...

改的话就是 ↓ ，就是如果你这分页器还要用的话，total就别设为0

async getList() {
  const result = await ... 
  this.list = result.data
  this.total = result.count
  
  // 错误，提示
  if (result.code !== '200') {
    this.$message({
      showClose: true,
      message: result.msg,
      type: 'error'
    })
    return
  }
  // 成功，但无相应数据
  if (....) {
    ...
    return
  }
  // 成功，渲染数据

}