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

Posted 2021-03-03 zwn-lucky7

bug：vue和element实现的后台分页，当前是第二页，点击搜索，强制设置current-page为1，但是当前页还是第二页没有改变。

•  1.页面 el-pagination v-if="pageshow"

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

  2.操作

  这里element的分页有个bug，就是在搜索过后的当前页数据变化了，原本的分页当前页并不会改变，这就会遇见一个问题，首次展示停留在第5页，搜索过后的数据并没有5页，不论前台分页或后台分页，页面都会展示：暂无数据！ 但其实是有数据的，只是额没有第五页的数据。所以在搜索的时候将当前页设置为1。

• 3.使用v-if绑定数据，当每次搜索的时候就注销掉前一个分页Dom，画面刷新完毕后，渲染一个同样的分页，重新渲染必须放到$nextTick中，这样在使用分页就不会出现问题了。
• 4.search是一个方法在methods中，调用的时候@click="search"绑定到 搜索按钮上 就可以了

• 1 earch() {
  2                 this.page = 1
  3                 this.pageshow = false
  4                 this.getList()
  5                 this.$nextTick(() => {
  6                     this.pageshow = true
  7                 })
  8             }

   

页面 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>1234操作这里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                })            }————————————————版权声明：本文为CSDN博主「jcat_李小黑」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/weixin_43216105/article/details/90044698