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

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

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

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

    
    
    <div class="pagination-container">
        <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
      })
    },
  • 相关阅读:
    Java中,由this关键字引发的问题
    Spring3.2.11与Quartz2.2.1整合时内存泄漏的问题的解决
    使用Nexus管理Maven仓库时,上传带依赖的第三方jar
    ActiveMQ5.10.2版本配置JMX
    JAVA的Hashtable在遍历时的迭代器线程问题
    关于JAVA中String类型的最大长度
    新增了某个模组后VS编译不过,报错说找不到头文件
    重写Overlap事件
    cmd端口占用查看和关闭端口
    转---详细的Android开发环境搭建教程
  • 原文地址:https://www.cnblogs.com/wangRong-smile/p/11287129.html
Copyright © 2011-2022 走看看