element 分页器数据不刷新bug解决方案

最新推荐文章于 2023-08-04 21:19:18 发布
最新推荐文章于 2023-08-04 21:19:18 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 开发遇到的bug 文章标签： bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42919799/article/details/121338305
版权

使用Element 分页器开发遇到的一个问题，这里记录下，也希望能帮到其他人

问题描述

image-20211115164832269

例：在第一页中搜索’张三’，页面中展示4条数据，切换页码到第 5 页，搜索关键字 ‘张三’，页码显示 ‘共4条’ 但是在页面中没有数据展示，查看控制台，接口中也显示返回了4条数据。

解决方法

<el-button @click="pageIndex = 1;getDataList();">查询</el-button>

只需要在 搜索 按钮上加上 pageIndex = 1;,注意，一定要加在调用方法的前面，否则不会生效的

逻辑鬼才不太聪明
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决element ui select下拉框不回显数据问题的解决
10-17
解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...
vue仿element实现分页器效果
10-18
【Vue仿Element实现分页器效果】 在前端开发中，分页器是一个常见的组件，用于在大量数据中分块展示，提高用户体验。Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue.js 的组件库，提供了优雅的分页器...
vue3.0+element plus 实现使用分页功能页面刷新后维持页面不变
weixin_46466247的博客
05-06 5201
说明：案例只有分页栏，没有数据。实现的效果体现在分页栏页码的变化上。 构建分页 在element plus挑选一个分页组件，创建test页面 <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200
解决：element-ui分页器在将最后一页列表数据删完时，页面不刷新到最新数据
weixin_71403100的博客
05-09 1068
解决：element-ui分页器在将最后一页列表数据删完时，页面不刷新到最新数据
【vue】element 的el-table，数据刷新，但表格不刷新 终极解决方案
无轩居 (Home of vip)
03-06 7856
vue 2.x 的elment ui this.tableData.splice(1.0) 强制它更新一下就可以了。 要不要，你就算主动去getdata，它也不会更新
Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑
weixin_43852569的博客
08-28 7477
Element-ui中的分页(pagination)组件的current-page属性不同步更新视图的坑
关于vue+element-ui项目的分页，返回默认显示第一页的问题解决
weixin_30670151的博客
04-04 436
关于vue+element-ui项目的分页，返回默认显示第一页的问题解决 问题描述 当前页面如下： 然后点击页码跳到第3页，然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮，返回到当前页，结果页面分页显示第一页，对应页面内容也是第一页 期望效果 从新页面返回的时候，页码和页面内容仍旧保持在跳转离开前的样子。 解...
详解关于element级联选择器数据回显问题
10-17
总结来说，解决 Element UI 级联选择器数据回显问题的关键在于： 1. 理解级联选择器的数据结构，包括 `value`、`label` 和子级 `children` 的定义。 2. 在编辑或更新表单时，将后端返回的数据（通常是 ID）转换为...
vue数据更新UI不刷新显示的解决办法
11-19
总结，理解Vue的数据绑定机制和响应式原理，以及正确使用数组变异方法、`Vue.set`、计算属性和监听属性，将有助于避免数据更新但UI不刷新的问题，确保Vue应用的正常运行和用户体验。在日常开发中，遇到类似问题时，...
Element实现表格分页数据选择+全选所有完善批量操作
12-11
后台管理系统中的列表页面，一般都会有对列表数据进行批量操作的功能，例如：批量删除、批量删除等。...一开始以为不就是分页的时候把之前选中的数据存储在一个list里面嘛，然后选择的时候map一下。等到自己
vue2+ElementUI分页器换页查询不到
最新发布
m0_71831069的博客
08-04 764
问题分析：因为在第一页查询的时候page = 1，经过计算截取位置，刚好是从最开始截。但是此时的page = 2....，回来的数据放在列表中，分页器在截取的时候，计算截取位置，刚好错过列表中的数据，导致截取不到。在查询之后将分页器的page = 1，这样当数据回来，分页器截取的时候是从最开始截取，就可以截取到数据，显示在第一页。在使用分页器的时候，明明是查的所有数据，在第一页做查询操作可以查到，但是切换到其他页就查不到了。page表示页码，pageSize表示一页几条。这里可以看到在第一页是可以查到的。
element-ui分页组件的bug
weixin_48016008的博客
12-20 1178
** element-ui中的table表格进行分页查询时，会出现组件bug。 ** 问题： 例如：在第一次查询后跳转到第四页，此时再进行新的条件查询，若该条件查询到的数据只有三页，查询时入参page: 4，即该页无数据，页面展示无数据。 解决方案： 错误方案： 在查询函数中，点击查询按钮时使page: 1，进行传参。 结果：进行问题复现操作，页面显示第一页数据，底部分页标签却停留在第四页。 仍然是有问题的。 正确解决方案： 进行问题复现操作时（再次进行查询时），依然传参page: 1，写回滚代码，
ElementUi分页组件碰到的问题
Miketutu的博客
02-06 526
ElementUi分页组件碰到的问题
解决element-ui e-table表格中使用多选，当翻页时已选中的数据丢失
棠樾的博客
07-01 670
使用element-ui中的table时，当有多选又有翻页功能时，点击翻页后之前选中的数据丢失，怎么使表格具有记忆功能呢 element-ui API中有几个属性可以供我们完美解决这个问题 1.单元格的属性和方法： 2.表格的方法： 另外补充：在表格中使用select方法可以判断当前行是否选中 ...
vue项目前端做分页（后端一次性返回所有数据，前端自己分页）
qq_46103732的博客
04-26 2157
vue项目前端做分页（后端一次性返回所有数据，前端自己分页） ​ 在项目中有些场景会让前端自己来处理分页，实现的方法也很简单，我们只需要用到一个slice方法就可以了。下面是具体的实现步骤： 首先是实现一个分页组件，在这里就不具体讲述了，需要知道怎么实现分页组件的小伙伴先阅读下面这个教程 前端基于elementui封装分页组件 那根据上面的教程在相应的页面引入分页组件后，我们开始对请求回来的数据进行拆分分页 ​
element-ui分页器设置每一页显示数量(page-size)后页码没有发生变化原因与解决
热门推荐
动感超人的博客
04-30 1万+
element-ui当中分页器,设置每一页显示数量(page-size)后页码没有发生变化
vue3中使用elementui，分页currentpage显示页码不更新视图
weixin_52296487的博客
03-23 2481
vue3中使用elementui，分页组件中，从详情页跳回来，希望能保留分页的当前页码，但是页码改变了，但是却视图没更新，还是初始值1。 尝试过的方法： 1、使用v-if刷新该组件，无效 2、使用nextTick，更新页码，也无效 3、v-if + nextTick ，也无效 4、。。。 最终解决办法 通过使用定时器，晚一点赋值，成功解决问题。 注意事项： 1、赋值要给Number类型 2、延迟赋值 setTimeout(()=>{ panigation.currentPage = Number
elementui分页组件el-pagination中切换下一面数据更新正确，但是页码还是现实第一页
qq_26311665的博客
03-05 1659
elementui分页组件el-pagination中切换下一面数据更新正确，但是页码还是现实第一页
el-pagination解决分页不更新的原因及解决方法
qq_40685439的博客
06-29 6059
场景：在分页查询的时候，有时候我们在切换查询条件时，分页的页数还停留在上一次查看的页数，而不是从第一页开始。 下图是重新查询的数据，但是页码还停留在第六页（当数据多于六页数据的时候，会显示第六页的数据，但是当数据少于六页数据时，就会显示暂时无数据，其实数据是拿回来的，只是这时候分页器接收到的页码是6，而没有那么多数据显示，就会显示暂无数据） **解决办法：**可以给装分页器的元素添加一个条件渲染，让每次请求时，分页器都重新加载。在请求开始前，把pageshow设为false，请求结束之后，就设为true（
element中分页器如何显示数据
06-10
在 Element UI 中，Pagination 分页组件只负责分页的显示和分页导航栏的生成。要将数据显示在分页器上，需要手动实现相应的逻辑。 下面是一个简单的例子，演示如何将数据显示在 Pagination 分页器上： ``` <template> <div> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr v-for="(item, index) in listData" :key="index"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" /> </div> </template> <script> export default { data() { return { listData: [], // 列表数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页数据量 total: 0, // 数据总数 }; }, methods: { // 处理分页器页码变化事件 handlePageChange(currentPage) { this.currentPage = currentPage; this.fetchData(); }, // 从服务器获取数据 fetchData() { // 发送请求，获取当前页码对应的数据 // ... // 模拟服务器返回的数据 const data = [ { id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 20 }, { id: 3, name: '王五', age: 22 }, // ... ]; this.listData = data.slice( (this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize ); this.total = data.length; }, }, created() { this.fetchData(); }, }; </script> ``` 在上面的代码中，我们通过 `v-for` 指令将列表数据 `listData` 显示在表格中，同时在页面底部添加了 Pagination 分页组件。在 `handlePageChange` 方法中，我们监听了分页器的页码变化事件，并根据当前页码获取相应的数据。在 `fetchData` 方法中，我们模拟了从服务器获取数据的过程，并将当前页码对应的数据保存在 `listData` 中，并将数据总数保存在 `total` 中。通过这样的方式，就可以将数据显示在 Pagination 分页器上了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值