关于element分页 搜索的bug

最新推荐文章于 2023-03-05 17:37:30 发布
最新推荐文章于 2023-03-05 17:37:30 发布
阅读量745 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43281249/article/details/92992036
版权

在第一页搜索没问题，但是点击到第二页搜索就会出现如下效果，暂无数据。。。。。

bug展示

为什么会出现这样的bug呢？

原因 是发起搜索请求时，传入的page还是current_page，也就是2，搜索的内容如果没有两页那么多，就会显示暂无数据

原因展示

解决办法：在搜索请求内添加如下代码

解析：判断搜索输入框是否有内容，有搜索内容就将传入的page设置为第一页，这样就能保证如果搜索结果是存在的，就一定能显示出来

解决展示

 

billy_ptybr
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
element跨分页操作选择详解
01-19
本文实例为大家分享了element跨分页操作选择的具体代码，供大家参考，具体内容如下 业务需求：在批量导出或者批量删除的时候会涉及到跨分页导出或者批量删除，这是你会发现，当你选择后点击分页，发现之前选择的数据...
element ui 分页器遇到的bug。切换页面时当时选择第二页，第二个选项卡也是第二页
肖肖肖丽珠的博客
09-18 8573
我在这个教材选项卡选择了第二页。 然后切换到课件。看到下面效果 还是在第二页的。实际上我已经处理了让this.page=1.而且接口也给的第一页的，但是页面上显示的却是2.   解决办法就是在分页器上加一个参数。:current-page.sync = "page" 就可以啦 <el-row>                         <el-col :s...
解决element 分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题
热门推荐
JCat的博客
05-09 1万+
前言 上一篇写前台解决分页问题的时候没有这个问题，但是在实际项目后台中有遇到过，所以在这里专门说一下，如果参考前台分页出现这种问题了，也可以使用这种方法！ bug：vue和element实现的后台分页，当前是第二页，点击搜索，强制设置current-page为1，但是当前页还是第二页没有改变。 解决方法 如何使用分页就不说了，可以参考上一篇的前台解决分页 页面 el-pagination v-i...
elementui分页组件el-pagination中切换下一面数据更新正确，但是页码还是现实第一页
qq_26311665的博客
03-05 1554
elementui分页组件el-pagination中切换下一面数据更新正确，但是页码还是现实第一页
element的分页查询后页面数据变了，分页却没变的问题
zheshihuahua的博客
01-12 1880
从最后一页点击查询后，页面数据变为第一页的数据了，但是分页会显示2
ElementUI实现分页查询
nsnydnz的博客
10-25 2165
ElementUI实现分页查询 分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。 后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据 文章目录ElementUI实现分页查询一、在elemen
vue+element el-pagination后端分页bug
qq_42655697的博客
03-23 472
bug描述 当搜索结果总页数小于当前所在页码，会显示“暂无数据”，实际上有数据 产生原因：我们搜索的时候向接口查询数据，传的currentpage是当前的，但是想搜索的数据并没有那么多页，所以会无法显示数据 解决思路 他搜索的时候，重新渲染页面，页码传1过去 解决方法 定义pageshow，默认为true，search的时候让他变成false，再重新渲染页面，改变currentpage，再让pageshow变成true，pageshow绑定在分页上 步骤（从上至下）： 1.搜索处： @chang.
vue+element实现分页及条件搜索功能(纯前端分页)
ll569421432的博客
03-09 8872
学习vue+element做用户条件分页查询遇到的坑 html页面主要代码： ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现) <div id="user"> 1. <el-table :data="userInfo.slice((currentPage-1)*pageSize,currentPage*pageSize)" ...
vue element 搜索，分页 ，优化，其他一些技巧
不想起床
12-05 552
涉及到单个查询，联合查询，分页等功能。出一个接口，后面坠不同参数，只需要监听url参数的变化，或者本身传递的参数。将url参数的变化，作为查询的条件。 出发点： 通过beforeRouteUpdate，对路由变化进行监控 beforeRouteUpdate(to, from, next) { // 如果路径一样，说明才是进行搜索，或者分页的数据 if (to.path === from.path) { // 对参数对象，进行拷贝 const newQu
Vue项目 + element - 前端分页加搜索（不依赖接口实现分页，接口一次性返回数据）
weixin_55042716的博客
11-12 2776
需求： 后端一次性返回数据，前端实现分页效果，并且可以搜索，，，最左边懒和最右边栏固定，当窗口缩小时，产生滚动条
vue仿element实现分页器效果
10-18
主要介绍了vue仿element实现分页器效果，实现思路是定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2)，具体实例代码大家参考下本
vue+element tabs选项卡分页效果
10-16
主要为大家详细介绍了vue+element tabs选项卡分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element ui分页多选,翻页记忆的实例
10-16
今天小编就为大家分享一篇element ui分页多选,翻页记忆的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
什么是mysql安装配置教程以及学习mysql安装配置教程的意义
05-21
mysql安装配置教程
【光伏预测】基于BP神经网络实现光伏发电功率预测附Matlab代码.zip
05-21
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
onlyoffice搭建及与alist使用的view.html
05-21
onlyoffice搭建及与alist使用的view.html
android-support-v7-recyclerview 添加错误
05-21
1.Project Structure中添加依赖时，容易添加不进去，所以使用本地添加，将android-support-v7-recyclerview放在对应项目的lib文件中，并add as library。如果在build.gradle中出现implementation files('libs\\android-support-v7-recyclerview.jar')就算是添加成功。 2.在布局文件中使用 androidx 的布局控件，在逻辑代码文件中导入androidx相关包。（取代android.support.v7） 3.在gradle.properties文件中，注释android.enableJetifier=true。(# android.enableJetifier=true) 最新way2：
3款正射影像DOM导入CASS插件（测试通过）.rar
最新发布
05-21
3款正射影像DOM导入CASS插件（测试通过），带坐标导入，超实用！
什么是c语言以及学习了解c语言的意义是什么
05-21
c语言
vue element分页
07-27
在使用Element UI进行分页时，你可以使用Element UI的Pagination组件。 首先，确保你已经安装了Element UI。然后，在你的Vue组件中导入Pagination组件： ```javascript import { Pagination } from 'element-ui'; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值