码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-03-27 10:32:18      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:handles   16px   方法   var   ati   blog   链接   页码   oid   

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

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

标签:handles   16px   方法   var   ati   blog   链接   页码   oid   

原文地址:https://www.cnblogs.com/zwn-lucky7/p/12579483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!