element-ui Pagination 分页器 删除最后一页数据时跳转回上一页

已于 2023-08-17 16:33:59 修改
阅读量306 收藏
点赞数
分类专栏： vue 文章标签： vue elementui
于 2023-08-17 16:25:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68665403/article/details/132342959
版权
在使用elementUI分页组件的时候，当删除最后一条数据的时候会出现当前页码值跳转，数据为空的情况，如下图：

上图的情况是因为我们在执行删除请求成功后，当前的页码值仍为该值，又调用渲染页面的函数，该页码的数据都已经删除完毕，所以显示为空数据,如下图代码示例

解决： 

我们只需要在删除之前把当前页码值动态的修改就可以。如下图代码可以解决该问题：

第一段代码，precisePage可以获取到总页数

第二段代码，给currentPage赋值最新的页码

第三段代码，防止判空给currentPage赋值为初始值1

万恶的摸鱼仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
materialui-pagination：Material UI的简单分页组件
02-04
Material UI的简单分页组件。 基于。 安装 $ npm install materialui-pagination 例 //React import React from 'react' ; import PropTypes from 'prop-types' ; import { render } from 'react-dom' ; //...
vue分页器组件跳转下一页上一页
07-20
使用vue编写的分页器组件，可设置初始页码，支持输入页码跳转
VUE+Element+bus 带参数返回上一页 列表分页器页数根据反回的页数变化
weixin_59081597的博客
02-08 377
VUE+Element+bus 带参数返回上一页 列表分页器页数根据反回的页数变化
vue-element分页使用 删除最后一条数据后，返回上一页
weixin_45859470的博客
12-27 507
【代码】vue-element分页使用 删除最后一条数据后，返回上一页。
实现最完整的分页效果，删除最后一个自动跳转到前一页的数据
m0_74105134的博客
07-20 497
这是简单的基础分页，具体来讲，当页面一共展示五页的数据，删除第五页的最后一条数据时应该自动跳转到第四页，这是需要和我们页面的数据联系到一起。1.首先是使用的组件库，首先要正确的安装引用组件，才可以在项目中使用，具体代码如下。使用的是elements里的分页的组件，也可以自己封装分页组件。这样就可以实现一个完整的分页效果！的计算: 这一行代码计算出最后一页的长度，即总数 (这可以用来检查最后一页是否完全填满了结果。条件判断: 接下来的条件判断语句使用。
elementUI 返回上一个页面
07-08 595
There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should leave quickly.
elementUI分页删除最后一页数据时跳转回上一页
qq_46580571的博客
04-09 1794
问题： 我们在使用elementUI分页组件的时候，当我们删除最后一条数据的时候会出现当前页码值跳转，数据为空的情况，如下图： 上图的情况是因为我们在执行删除请求成功后，当前的页码值仍为该值，又调用渲染页面的函数，该页码的数据都已经删除完毕，所以显示为空数据,如下图代码示例 解决： 分析问题完毕之后，我们只需要在删除之前把当前页码值动态的修改就可以。如下图代码可以解决该问题 上图中第一行代码可以计算出来当前数据总页数 上图中第二行代码可以把请求接口初始数据动态的判断出来，并赋值 上图中第三行代码可以
Vue分页删除最后一条数据，返回上一级的分页
Knight
01-02 1053
Vue分页删除最后一条数据，返回上一级的分页
解决 element-ui Pagination（分页）删除末页最后一条数据，并返回上一页问题
m0_67484664的博客
05-14 780
在使用`element-ui 的 Pagination`的时候，删除末页最后一条数据，重新发送请求获得数据时，任然显示最后被删除的那条数据，并重新请求获取数据失败；但数据库中确实删除成功。
Element-UI踩坑之Pagination组件的使用
10-17
主要介绍了Element-UI踩坑之Pagination组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+Element-ui实现分页效果
01-21
1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination 分页，使用Pagination 快速完成分页功能 最终效果展示 <el-breadcrumb separator=
vue+Element-ui实现分页效果实例代码详解
01-19
1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination 分页，使用Pagination 快速完成分页功能 最终效果展示 <el><i class=el-ico
element-plus+vue3+ts Pagination分页 删除最后一条数据返回上一页问题
qq_44997940的博客
10-18 702
啦啦啦
vue element 点击按钮返回上一页
疑问 搜索 动手 解决 记录
12-16 4684
如何通过点击的方式控制当前页返回到上一个路由页面： <el-button plain @click="returnPage">取消</el-button> // 返回上一级 returnPage(){ if (window.history.length <= 1) { this.$router.push({ path: "/system/storageManagement" }); return false; }
vue element-ui分页删除最后一页的最后一条数据，返回上一页
m0_46693606的博客
04-28 2527
1.默认当前页为第一页，页容量为10条 data(){ return{ current:1, size:10 } } 2.再点击删除的时候进行如下配置 // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页（pageSize=1时不生效） let totalPage = Math.ceil((this.total - 1) / this.size) let currentPage =this.
element-ui 分页器，删除最后一条数据，不会跳转到前一页
m0_72883244的博客
08-10 210
分页器
element表格分页时，选中行后，跳转其他页，当前页面选中记录消失
qq_42853710的博客
02-24 2806
在实际开发中，数据量大的表格基本都添加上了分页功能，每个页面请求的数据回交换更新，第一页的选中效果在跳转至第二页后，如果没有做相关处理，选中项会被清空，具体解决方法如下 1、在需要处理的表格标签中加上 :row-key="getRowKeys"以及@selection-change=“handleSelectionChange” 点击事件 2、在select选项列的中加上:reserve-selection=“true” 3、在data中添加 //选中的list getRowKeys(row)
vue element table列表删除某一页的最后一条数据之后页面不自动跳到上一页
weixin_50561985的博客
07-24 4305
例如项目场景删除某一页的最后一条数据之后页面不自动跳到上一页。
Element-plus使用记录
最新发布
IT菜鸟
04-24 166
Element-plus使用中遇到的问题与解决方案。
Vue.js结合Element-UI实现分页跳转页面详情返回记住当前点击第几页
06-09
1. 在Vue.js中引入Element-UI的分页组件，并设置相应的属性，如当前页数、每页显示条数、总条数等。具体可以参考Element-UI的文档：https://element.eleme.cn/#/zh-CN/component/pagination。 2. 在分页组件中绑定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值