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

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

 <el-pagination v-if="pageshow" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
 </el-pagination>

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

            search() {
                this.page = 1
                this.pageshow = false
                this.getList()
                this.$nextTick(() => {
                    this.pageshow = true
                })
            }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。