解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题
前言
上一篇写前台解决分页问题的时候没有这个问题,但是在实际项目后台中有遇到过,所以在这里专门说一下,如果参考前台分页出现这种问题了,也可以使用这种方法!
bug:vue和element实现的后台分页,当前是第二页,点击搜索,强制设置current-page为1,但是当前页还是第二页没有改变。
解决方法
如何使用分页就不说了,可以参考上一篇的前台解决分页
页面 el-pagination v-if="pageshow"
操作
这里element的分页有个bug,就是在搜索过后的当前页数据变化了,原本的分页当前页并不会改变,这就会遇见一个问题,首次展示停留在第5页,搜索过后的数据并没有5页,不论前台分页或后台分页,页面都会展示:暂无数据! 但其实是有数据的,只是额没有第五页的数据。所以在搜索的时候将当前页设置为1。
使用v-if绑定数据,当每次搜索的时候就注销掉前一个分页Dom,画面刷新完毕后,渲染一个同样的分页,重新渲染必须放到$nextTick中,这样在使用分页就不会出现问题了。
search是一个方法在methods中,调用的时候@click="search"绑定到 搜索按钮上 就可以了
解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题的更多相关文章
- Element分页组件prev-text和next-text属性无效?
前情提要 /(ㄒoㄒ)/~~ 作为刚刚接触 Element 组件的人来说,看文档是第一步,但是当我想要修改分页组件里面的按钮时却遇到了问题. 文档中写到是需要给 prev-text 和 next-te ...
- vue-cli3 element 分页组件el-pagination的基本使用
<!--分页组件--> <el-pagination :total="total" :current-page="currentPage" : ...
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- Easyui datagrid 修改分页组件的分页提示信息为中文
datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...
- 基于Vue的简单通用分页组件
分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...
- asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
- DRF框架(八)——drf-jwt手动签发与校验、搜索过滤组件、排序过滤组件、基础分页组件
自定义drf-jwt手动签发和校验 签发token源码入口 前提:给一个局部禁用了所有 认证与权限 的视图类发送用户信息得到token,其实就是登录接口,不然进不了登录页面 获取提交的username ...
- 小程序报错Do not have xx handler in current page的解决方法
看到小程序这一大串的“Do not have bindName handler in current page: pages/card/card. Please make sure that bind ...
随机推荐
- oracle一体机(exdata)创建ACFS文件系统
ACFS是一个支持多个平台,可扩展的,基于ORACLE ASM的集群文件系统,可以用来存储数据库和各种应用的文件,包括数据库的trace文件,alert日志文件和配置文件等等,也可以用来存储视频,音频 ...
- idea 设置默认maven auto import,不需要每次都弹出
1 2 误区 从这里点进去进行设置,或者每次打开项目右击下方的 auto impot都是不对的.
- css中图片有缩放和转动效果
现在html中利用div来包裹住一张图片. <div class="xuanzhuan"> <img src="images/top.png" ...
- <读书笔记>如何入门爬虫?
大部分爬虫框架都是 发送请求 获得页面 解析页面 下载内容 存储内容 定个宏伟目标 淘宝1000页 知乎 豆瓣 ... python基础 list.dict:序列化爬取的内容 切片:分割爬取内容,获取 ...
- 【python】快速排序
快速排序思想和C++的差不多,主要是通过写排序对python的语法更加了解. # 快速排序 def qsort(arr, left, right): if left >= right: retu ...
- Lunascape:将FireFox、Safari和IE合为一体的浏览器
转自:http://blog.bingo929.com/lunascape-firefox-safari-ie-all-in-one.html 作为前端开发/网页设计师,电脑中总是安装着各种不同内核渲 ...
- js正则表达式常见面试题
1 . 给一个连字符串例如:get-element-by-id转化成驼峰形式. var str = "get-element-by-id"; var reg = /-\w/g; / ...
- JAVA算法之简单排序
冒泡排序: 在概念上是排序算法中最简单的,但是运行起来非常慢,冒泡排序遵循以下几个规则(假如我们现在要给一队打乱的足球队员排序): 比较两个队员 如果左边的队员比右边的高,则交换位置 向右移动一位,比 ...
- Linux下screen的应用
在linux系统下,通常我们在执行一些运行时间比较长的任务时,放到后台执行或者使用screen和nohup都是不错的选择,因为任务执行的时间太长了,必须等待它执行完毕,在此期间可不能关掉窗口或者断开连 ...
- Java 基础 - 内存泄露Memory leak & 内存溢出Out of memory
内存泄露 & 内存溢出 关系 https://www.cnblogs.com/panxuejun/p/5883044.html 内存泄露的6种情况: https://blog.csdn.net ...