解决element-ui分页器中删除最后一页最后一项数据时，页面不刷新到最新页的问题

最新推荐文章于 2024-05-29 22:19:39 发布
原创 最新推荐文章于 2024-05-29 22:19:39 发布 · 782 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在前端开发中，遇到一个页面显示异常的情况，当删除最后一项数据后，尽管只剩下6页，但当前页仍显示为第7页，导致页面无数据展示。为解决这个问题，需要在重新渲染数据列表前进行判断，确保调用数据请求时正确更新页面状态。通过添加适当的判断逻辑，可以避免此类错误，提高用户体验。

首先看删除完最后一项数据后，明明只剩6页，当前页确还是第七页，所以导致最后页面没有数据
在这里插入图片描述
这时候需要在调用重新渲染数据列表之前写下以下判断，再调用数据请求即可
在这里插入图片描述

vue2 -- element-ui Pagination分页删除最后一页的最后一条数据，返回上一页。
King Saj
01-09 1168
table列表设置10条/页，共11条数据，删除第二页第一条后，页面显示无数据。建议：刷新页面，显示上一页的数据。
解决vue2使用element-ui中表格组件，删除当前分页最后一条数据后，无法获得新数据的问题
涉及毕业论文、远程调试、网站、小程序、app、python、前端、pycharm、vscode等
08-16 798
解决vue2使用element-ui中表格组件，删除当前分页最后一条数据后，无法获得新数据的问题
el-pagination删除列表里的最后一条数据，列表内容未刷新
weixin_42301445的博客
05-19 761
问题描述 使用 elementUI 的 el-pagination的时候，删除列表里的最后一条数据，分页会回到上一页，但是列表没有数据 解决方案 本来是想着在请求业务层去做的，但是每个分页都要加一大坨代码感觉很麻烦就对 el-pagination进行了一下封装 <template> <el-pagination v-on="$listeners" v-bind="attr" > <slot></slot&gt..
Vue组件库Element-ui 删除表格最后一页 的最后一条数据时，重新获取数据，不会刷新页面BUG
m0_48469523的博客
05-08 2594
Vue组件库Element-ui 删除表格最后一页 的最后一条数据时，重新获取数据，不会刷新页面的BUG 本人小白自学前端中，在一个element-ui项目中，遇到这样的一个bug 。 在删除了第七页的最后一条数据之后，重新获取了列表数据，但是不显示数据，需要刷新之后才会显示。如图： 百度之后，说是虽然数据删除了但是还是在当前页面。 so 本着没事多敲敲代码的想法 验证了下 如下图： *看到了结果之后，顿时感叹自己还是太弱了， 然后看了下前辈们提供的方法， 瓦特？ 要定义这么多变量？ 我 就比较懒不想
解决 element-ui Pagination（分页）删除末页最后一条数据，并返回上一页问题
m0_67484664的博客
05-14 1042
在使用`element-ui 的 Pagination`的时候，删除末页最后一条数据，重新发送请求获得数据时，任然显示最后被删除的那条数据，并重新请求获取数据失败；但数据库中确实删除成功。
element-ui 分页器，删除最后一条数据，不会跳转到前一页
m0_72883244的博客
08-10 403
分页器
vue2 element-ui 分页查询前后端
02-16
每当用户调整每页记录的数量或是选择了不同的页数时，这些方法会被调用来刷新视图中的数据显示[^1]。 另外，在实际应用中还需要有一个加载数据的方法： ```javascript loadPage(pageNumber, sizePerPage){ // ...
element ui分页器
01-24
### Element UI 分页器使用教程 Element UI 的分页组件 (`el-pagination`) 提供了一种简单而有效的方式来处理大量数据的分页显示。此组件支持多种属性配置，可以轻松集成到项目中并自定义样式。 #### 基本用法 ...
element-UI 每页显示条数错误
最新发布
02-20
### Element-UI分页组件时，如果遇到每页显示条数出现错误的情况，通常是因为分页逻辑中的某些参数未被正确设置或更新。为了确保分页功能正常工作，需特别关注`pageSize`和`currentPage`这两个属性。 对于`pageSize...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
element-ui分页，删除数据之后如何还在当页
Mr-Bean的博客
08-14 1508
<el-pagination background layout="prev, pager, next,total,jumper" style="padding: 30px 0; text-align: center;" :total="total" :current-page="page" :page-size="limit" @current-change="fetchData" > 问题1：上下页切换不生效 分页插件对应的page-change方法fetc
在 element 的 table列表中删除最后一条数据页面不自动跳到上一页的解决方法
miracle_linlei的博客
01-11 778
在 element 的 table列表中删除最后一条数据页面不自动跳到上一页的解决方法
element-ui el-pagination分页 删除本页最后一条数据，跳转到上一页
fdksfskldfdslkfs的博客
07-22 1377
userRoleList.length表格的长度。currentPage1,当前页。pagesize10,每页条数。
【解决element table删除当前页最后一条数据会出现暂无数据，没有出现跳转到前一行的情况】
qq_42891765的博客
01-21 1216
最近在用表格的时候，发现标题的情况，在网上找了很多案例，均没有成功。就按照一位博主的方法进行调试，最终解决问题！特此将代码贴出~ //currentPage: 1, 当前页码 //pagesize: 12, 每页显示的行数 //tableData.length 总数据的长度 this.currentPage > 1 && ((this.tableData.length ) / this.pagesi
el-pagination在删除非第一页的最后一条数据遇到的问题
xixi_csdn的博客
05-29 1382
这个问题是element-ui中的问题，可以从源码中看出来，虽然页码更新了，active也是对的，但是未调用current-change的方法，这里就不是很合理。我先是在网上找的答案，然后改好之后去看的源码。因为大都是只说怎么改的，没有解析源码，我就记录一下；本来寻思这个问题我得去参与一下elementui的建设，给一无是处的工作添上一笔浓墨，谁知道elementui自2023年八月之后就不维护了，我又去看了elementplus，这个bug已经改好了。哎，发现的太晚了，太影响我赚钱了。
使用element-ui时删除最后一页全部数据时显示无数据的bug修复
JackieDYH的博客
06-18 1929
问题： element-ui的分页组件在你删除最后一页数据的时候默认的还是会显示在最后一页，此时最后一页已经没有数据了，所以就显示暂无数据，需要手动去跳转到第一页或者重新刷新页面才能看到第一页的数据 解决： 1.如果是删除最后一页的最后一条数据，则要跳转到第一页 2.如果不是则继续显示在当前页中 翻页组件 <!-- 分页 page-size 每页展示的数据条数 total 总数据条数 current-change 页码点击事件 --> <el-paginatio.
element Pagination分页 删除最后一条数据返回上一页问题
weixin_49186680的博客
01-30 3521
问题描述: 在删除表单最后一条数据时,自动返回上一页,但实际情况是还是删除前的页数,数据为空 解决办法: rowDel(row) { sensitiveWordDelete(row.id).then((res) => { if (res.data.code == 200) { this.$message({ type: "success", message: "删除成功!", })
vue中el-form表单无法监听到新增和删除的对象值
anny_mei的博客
09-10 661
这算是defineProperty的缺陷了 虽然Object.defineProperty通过为属性设置getter/setter能够完成数据的响应式，但是它并不算是实现数据的响应式的完美方案，主要缺陷有 无法检测到对象属性的新增或删除 <p>{{obj}}</p> <p>{{arr}}</p> data(){ return { obj:{ a:2 } } }, mounted () {
删除ElementUI分页最后一页最后一条显示bug
廖奕泽的博客
06-05 570
删除ElementUI分页最后一页最后一条显示bug
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值