解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题
2024-10-19 13:28:28
前言
上一篇写前台解决分页问题的时候没有这个问题,但是在实际项目后台中有遇到过,所以在这里专门说一下,如果参考前台分页出现这种问题了,也可以使用这种方法!
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
})
},
最新文章
- Macbook下virtualenv无法使用解决办法
- String 对象是不动态改变长度的
- ";稀奇古怪的";delete this
- mac 命令行 安装 需要管理员 权限
- python 暴力破解密码脚本
- jquery 设置css样式
- C#不安全代码和指针
- 有关c#装箱和拆箱知识整理
- 定时器 corn 表达式
- 转:Move all SQL Server system databases at one time
- 教程-Delphi中Spcomm使用属性及用法详解
- 采用 matlab 阅读SAR 元数据
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建
- 高级Java程序员的技术进阶之路
- 从蓝光到4K,腾讯视频高码率下载背后的技术
- 面向对象中Object常用属性总结
- MySql cmd下的学习笔记 —— 有关子查询的操作(where型,from型,exists型子查询)
- 2602 ACM 杭电 骨头容器 01背包
- CentOS配置教程
- Unity5权威讲解+项目源码+MP4
热门文章
- faster-rcnn算法总结
- Portainer Exec Container 失败解决方案
- ElasticSearch 索引查询使用指南
- error C1083: 无法打开包括文件: “ui_roadquery.h”: No such file or directory	c:\users\administrator\desktop\g_w_j\04 开发阶段\开发工程\imcshowapp\imcshowapp\roadquery.h	5	1	IMCShowApp
- spring boot 结合jsp简单示例
- Python关键字排序
- 增量+全量备份SVN服务器
- iOS开发系列-iOS适配
- MYSQL查询查找重复的电子邮箱
- css---盒模型新增样式