解决element 分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题

前言
上一篇写前台解决分页问题的时候没有这个问题，但是在实际项目后台中有遇到过，所以在这里专门说一下，如果参考前台分页出现这种问题了，也可以使用这种方法！
bug：vue和element实现的后台分页，当前是第二页，点击搜索，强制设置current-page为1，但是当前页还是第二页没有改变。

解决方法
如何使用分页就不说了，可以参考上一篇的前台解决分页

页面 el-pagination v-if="pageshow"

　　　　<el-pagination v-if="pageshow" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQue　　　　　　　　ry.page" :page-size="listQuery.rows" layout="total, sizes, prev, pager, next, jumper" :total="total">

　　　　</el-pagination>

</div>

操作
这里element的分页有个bug，就是在搜索过后的当前页数据变化了，原本的分页当前页并不会改变，这就会遇见一个问题，首次展示停留在第5页，搜索过后的数据并没有5页，不论前台分页或后台分页，页面都会展示：暂无数据！但其实是有数据的，只是额没有第五页的数据。所以在搜索的时候将当前页设置为1。
使用v-if绑定数据，当每次搜索的时候就注销掉前一个分页Dom，画面刷新完毕后，渲染一个同样的分页，重新渲染必须放到$nextTick中，这样在使用分页就不会出现问题了。
search是一个方法在methods中，调用的时候@click="search"绑定到搜索按钮上就可以了

handleFilter() {

　　this.listQuery.page = 1

　　this.pageshow = false

　　this.getList();

　　this.$nextTick(() => {

　　 this.pageshow = true

　　})

解决element 分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题

相关推荐