前言
上一篇写前台解决分页问题的时候没有这个问题,但是在实际项目后台中有遇到过,所以在这里专门说一下,如果参考前台分页出现这种问题了,也可以使用这种方法!
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
  })
},

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

  1. Element分页组件prev-text和next-text属性无效?

    前情提要 /(ㄒoㄒ)/~~ 作为刚刚接触 Element 组件的人来说,看文档是第一步,但是当我想要修改分页组件里面的按钮时却遇到了问题. 文档中写到是需要给 prev-text 和 next-te ...

  2. vue-cli3 element 分页组件el-pagination的基本使用

    <!--分页组件--> <el-pagination :total="total" :current-page="currentPage" : ...

  3. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  4. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  5. Easyui datagrid 修改分页组件的分页提示信息为中文

    datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...

  6. 基于Vue的简单通用分页组件

    分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...

  7. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  8. DRF框架(八)——drf-jwt手动签发与校验、搜索过滤组件、排序过滤组件、基础分页组件

    自定义drf-jwt手动签发和校验 签发token源码入口 前提:给一个局部禁用了所有 认证与权限 的视图类发送用户信息得到token,其实就是登录接口,不然进不了登录页面 获取提交的username ...

  9. 小程序报错Do not have xx handler in current page的解决方法

    看到小程序这一大串的“Do not have bindName handler in current page: pages/card/card. Please make sure that bind ...

随机推荐

  1. ionic:安装

    ylbtech-ionic:安装 1.返回顶部 1. ionic 安装 本站实例采用了ionic v1.3.2 版本,使用的 CDN 库地址: <link href="https:// ...

  2. JVM内核-原理、诊断与优化学习笔记(二):JVM运行机制

    文章目录 JVM启动流程 PC寄存器 方法区 保存装载的类信息 通常和永久区(Perm)关联在一起 Java堆 Java栈 Java栈 – 局部变量表 ** 包含参数和局部变量 ** Java栈 – ...

  3. sklearn 调用逻辑回归函数训练数据时出现 “unknown label type:unknown”

    problemsolution:

  4. 《转》python

    转自http://www.cnblogs.com/BeginMan/archive/2013/06/03/3114974.html 1.print语句调用str()函数显示,交互式解释器调用repr( ...

  5. Milking Cows /// 区间计数 离散化排序 oj10105

    题目大意: 输入n  接下来描述1~n位农夫挤牛奶的开始与结束时间   Sample Input 3300 1000700 12001500 2100 Sample Output 900 300 注意 ...

  6. Number浮点数运算详解

    文章来自我的 github 博客,包括技术输出和学习笔记,欢迎star. 一道题 0.1 + 0.2 = ? 在浏览器中测试下计算结果,得到的结果是 0.30000000000000004,并不是理想 ...

  7. __typeof与typeof

    其实之前在stackoverflow就看过一篇讲的比较详细的, https://stackoverflow.com/questions/14877415/difference-between-type ...

  8. RDD运行原理

  9. 8.0后广播在AndroidManifest.xml中注册后发送intent接收不到广播

    8.0后广播在AndroidManifest.xml中注册后发送intent是接收不到广播了,看了一下原因,好像是8.0为了管理系统和节约电量特别针对广播和服务发送intent的方式启动做出的改变,也 ...

  10. Python短信电话报警

    sid 和token 需要自己去https://www.twilio.com/try-twilio注册twilio 账号申请是免费的  from后面的电话也是官方提供的 直接看脚本 # -*-cond ...