解决 “element分页：删除最后一页的所有数据后，currentPage显示正确，但列表内容为空” 的问题

最新推荐文章于 2023-04-27 09:51:42 发布
最新推荐文章于 2023-04-27 09:51:42 发布
阅读量7.7k 收藏 27
点赞数 13
分类专栏： web前端 element  分页 currentPage 文章标签： elment分页 删除数据后数据列表为空 element ui删除数据，列表为空，currentPage减1 el-pagination 删除数据currentPage没有及时更新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37471721/article/details/100742726
版权

问题描述：
当表格有多页数据，并且末尾页只有一条数据时，删除末尾页的数据之后，数据列表为空，但是当前页码显示正确，还是直接上图说明吧。

最后一页只有一条数据，删除操作之前如图所示：

删除之前

删除之后的现象，如图

删除之后
删除之后页码定位到第10页是没有问题，但是之前第10页有数据，为什么现在列表数据空了呢？

问题排查：

排查发现，在执行完删除操作之后请求了新的数据列表，请求参数如下图

删除之后请求数据列表的参数
咦？我怎么传的是11呢？不应该传10吗？so…删除后得想办法及时更新掉page的值，再去请求列表数据
解决办法

分页设置：

分页设置

data设置

data设置

请求列表参数

请求列表参数

删除成功之后重置currentPage

删除成功之后重置currentPage

于是，删除第11页最后一条数据时，看到如图效果

在这里插入图片描述
完美解决啦！ 希望能帮到你们哟！

孟孟~
关注
  • 13
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
使用element-ui时删除最后一页全部数据时显示无数据的bug修复
JackieDYH的博客
06-18 1617
问题： element-ui的分页组件在你删除最后一页数据的时候默认的还是会显示在最后一页，此时最后一页已经没有数据了，所以就显示暂无数据，需要手动去跳转到第一页或者重新刷新页面才能看到第一页的数据 解决： 1.如果是删除最后一页的最后一条数据，则要跳转到第一页 2.如果不是则继续显示在当前页中 翻页组件 <!-- 分页 page-size 每页展示的数据条数 total 总数据条数 current-change 页码点击事件 --> <el-paginatio.
element表格翻页第2页从1开始编号(后端从0开始分页)
10-15
在本文中，我们将探讨如何在Element表格中实现从第2页开始编号为1，同时考虑到后端分页是从0开始的情况。 首先，我们需要明白问题的背景。通常情况下，后端API在处理分页时，页码是从0开始的，例如第1页对应于索引0...
elementUI分页删除最后一页数据时跳转回上一页
qq_46580571的博客
04-09 1882
问题： 我们在使用elementUI分页组件的时候，当我们删除最后一条数据的时候会出现当前页码值跳转，数据为空的情况，如下图： 上图的情况是因为我们在执行删除请求成功后，当前的页码值仍为该值，又调用渲染页面的函数，该页码的数据都已经删除完毕，所以显示为空数据,如下图代码示例 解决： 分析问题完毕之后，我们只需要在删除之前把当前页码值动态的修改就可以。如下图代码可以解决该问题 上图中第一行代码可以计算出来当前数据总页数 上图中第二行代码可以把请求接口初始数据动态的判断出来，并赋值 上图中第三行代码可以
关于element-ui删除最后一页全部数据时显示无数据的bug
weixin_40618068的博客
01-08 2842
话不多说，先上图演示bug 删除前，我这里是总共6条数据，默认一页显示5条，这是第二页也即是最后一页 删除后显示暂无数据，明明还有第一页的5条数据，这是为什么？？？ 答案其实很简单，element-ui的分页组件在你删除最后一页数据的时候默认的还是会显示在最后一页，此时最后一页已经么有数据了，所以就显示暂无数据，需要手动去跳转到第一页或者重新刷新页面才能看到第一页的数据。 那么我们的解决办法就...
vue解决 element分页：删除最后一页的所有数据后(包括批量删除)，刷新后数据表格为空。（前端、后端两种方法）
weixin_47426048的博客
05-12 2888
表格第二页只有一条数据，这时删除后，拉取刷新表格，发现表格分页跳到第一页，但是总数是20条， 页面也没数据，这其实是分页的current值还是2导致 直接上代码 handleDel(taskRow) { this.$confirm('此操作将删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then((
vue element分页删除最后一页的最后一条数据表格内容显示空
qq_51538602的博客
08-15 1685
vue element分页删除最后一页的最后一条数据表格内容显示空 那是因为currentPage 还停留在那一页 所以删除之后获取表格length 除以pageSize 来判断。
解决删除el-table最后一页数据，页面为空的问题
CCC_chtt的博客
04-27 300
解决删除el-table最后一页数据，页面为空的问题
el-table中表格数据新增字段首次渲染后再次修改该字段表格内容不刷新问题
weixin_42201272的博客
09-14 1119
问题演示 首先，使用定时器演示从后台获取过来数据，然后添加isPlaying字段，表格能正常渲染出来。 但是当我们点击修改按钮修改isPlaying的时候，isPlaying的实际数据已经改变但是表格渲染出来的值却没变。 <template> <div> <el-table :data="list" style="width: 100%"> <el-table-column label="日期" width="180">
【解决element table删除当前页最后一条数据会出现暂无数据，没有出现跳转到前一行的情况】
qq_42891765的博客
01-21 988
最近在用表格的时候，发现标题的情况，在网上找了很多案例，均没有成功。就按照一位博主的方法进行调试，最终解决问题！特此将代码贴出~ //currentPage: 1, 当前页码 //pagesize: 12, 每页显示的行数 //tableData.length 总数据的长度 this.currentPage > 1 && ((this.tableData.length ) / this.pagesi
IIS部署网站（建站）
weixin_30345055的博客
12-14 400
双击IIS图标，运行IIS服务器； 如下图所示： 2 IIS打开后，选中网站，然后右键，在弹出的菜单中，选择新建，然后选择网站；如下图所hi： 3 在弹出的窗口中，直接点击下一步；如下图所示： 4 输入网站描述，并点击下一步；如下图所示： 5...
利用vue和element-ui设置表格内容分页的实例
08-27
Element UI 提供了一个名为 `el-pagination` 的组件，可以用来实现表格内容分页。下面是一个基本的使用示例： ```html small layout="prev, pager, next" :total="total" @current-change="current_change" > ...
vue+Element-ui实现分页效果实例代码详解
10-17
初始时，`currentPage`设为1，`pageSize`设为10，`userList`为空数组。 ```javascript data() { return { currentPage: 1, pageSize: 10, userList: [] } } ``` 3. **数据获取**： 我们通常在`created`...
vue+element tabs选项卡分页效果
12-13
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Element UI 是一套基于 Vue.js 的开源UI组件库，提供了丰富的表单、布局、导航等组件，适用于企业级后台管理系统。在本例中，我们将讨论如何使用 Vue 和 ...
使用封装的分页组件或element-ui分页组件删除当前页最后一条数据没有跳转到上一页显示暂无数据的bug
gaoyu007的博客
05-11 907
使用封装的分页组件或element-ui分页组件删除当前页最后一条数据没有跳转到上一页显示暂无数据的bug
vue + element-ui 删除表格数据可能引起的bug
qq_39196099的博客
01-07 540
开发环境 vue + element-ui 问题描述 当我们用到table表格组件功能的时候，通常会采用后端分页（默认了解后端分页），在做批量删除或者单行删除时候，如果我们在最后一页删除当前页的全部数据，删除成功后，会继续刷新页面，重新获取当前页的数据，这时候获取到数据会为空，可是我们是有数据的呀，只是当前页没有数据，因为删除成功后，数据总条数变少了，前端根据返回的total数据计算页码，页数也减1了，这时候出现没有当前页码的bug，而且当前页没有数据 解决思路 获取数据列表时候，根据返回的数据列表长度进行
vue中引用element-ui组件中的分页删除最后一条数据返回到上一页。
weixin_44571595的博客
08-08 562
vue中解决分页中删除最后一条数据返回上一页
element-ui分页组件修改当前页current-page后current-change事件不触发的一个小bug
热门推荐
LarrySun
06-12 2万+
最近在开发中遇到一个element-ui分页的一个小bug，具体场景如下 1、首先点击正常分页来到第二页数据正常展示 2、点击搜索，需求为回到第一页按条件搜索，此时也正常展示 3、再次点击分页去第二页，此时分页还停留在第一页，current-change事件不触发 原因有可能是点击搜索的时候在搜索里面通过代码去改变了current-page让分页回到第一页，但有可能...
解决Vue+Element-ui表单组件的删除功能删除角色的分页异常问题
weixin_55690518的博客
08-17 298
问题复现 如果删除最后一页的最一条数据之后，页面会显示不正常 原因 如果删除第最后一页（假设是第4页）的最一条数据之后，再发请求，还是求的第4页，而此时，后端已经求不到第4 页的数据了（被删除了）。 思路 在删除成功之，去检测一下，是否当前删除的是当前页最后一条数据，如果是，就把页码-1，再发请求 代码实现： async doDel(id) { try { const res = await deleteRole(id) console.log(res) // 1. 提示 this.$mes
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
vue element 分页最后一页
07-28
在使用 Vue 和 Element UI 进行分页时，可以通过监听当前页码和每页显示条数的变化，来判断是否是最后一页。以下是一个简单的示例代码： ```vue <template> <div> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" ></el-pagination> </div> </template> <script> export default { data() { return { currentPage: 1, pageSize: 10, total: 100 // 总条数 }; }, methods: { handleCurrentChange(currentPage) { this.currentPage = currentPage; // 判断是否是最后一页 if (currentPage === Math.ceil(this.total / this.pageSize)) { console.log('最后一页'); // 执行相应的逻辑操作 } }, handleSizeChange(pageSize) { this.pageSize = pageSize; } } }; </script> ``` 在上述代码中，通过监听 `current-change` 事件，当当前页码变化时执行 `handleCurrentChange` 方法。在该方法中判断当前页码是否等于总页数，如果相等则表示是最后一页。 注意：`total` 是总条数，`pageSize` 是每页显示条数，需要根据实际情况进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值