element 分页组件遇到的问题

先操作element分页，切换到第二页，然后操作。

从代码中强制将current-page强制设置为1

（即重新查询数据，并将当前页重置为第1页）此时画面显示是对的，

分页组件已经将第1页的页码数字激活了然后点击第2页数字，进行换页画面显示也是对的，第2页数字变成激活状态，

但是此时竟然无法触发current-change事件

原因

使用this.pagination.currentPage = val，强制改变分页页数以及样式，没法完全重置分页组件

解决方案

data里面初始化paginationShow为true

<el-pagination v-if="paginationShow" 
 @current-change="handleCurrentChange" 
 :current-page.sync="pagination.currentPage" 
 :page-size="pagination.size" 
 layout="total, prev, pager, next, jumper" 
 :total="pagination.total"> 
 </el-pagination> 

然后使用v-if强制刷新组件即可，组件声明改成

search () { 
 this.paginationShow = false 
 this.handleCurrentChange(1) 
 this.$nextTick(function () { 
 this.paginationShow = true; 
 }) 
 }, 

paginationShow = true，重新显示分页，必须放到$nextTick，画面刷新完毕后，不然无效果

handleCurrentChange(val) { 
 let _this = this; 
 _this.pagination.currentPage = val; 
} 

{{item.like > 0 ? item.like : '点赞'}} {{item.comment_content_show ? '取消' : '回复'}} 删除

回帖

{{reply.like > 0 ? reply.like : '点赞'}} {{reply.comment_content_show ? '取消' : '回复'}} 删除

收起