解决Antd中的Pagination分页组件在删除最后一页最后一条数据时currentPage的问题

最新推荐文章于 2024-05-29 22:19:39 发布
最新推荐文章于 2024-05-29 22:19:39 发布
阅读量2.3k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joanna_7471/article/details/114634308
版权
本文档探讨了在Ant Design的Pagination组件中遇到的问题：当删除最后一页的最后一条数据时，页面仍停留在空的第2页。原因是删除后未更新请求列表的参数。解决方案是在删除成功后，在请求新列表前判断，若删除的是最后一页的最后一项，则将currentPage减1。
摘要由CSDN通过智能技术生成

问题描述：在删除最后一页的最后一个数据之后，再去请求列表数据为空；
如图：生产任务6为第2页的最后一条数据
在这里插入图片描述
删除生产任务6之后在这里插入图片描述
原因分析：因为在删除生产任务6之后，再去请求列表的参数的pageNo还为2，所以得到的数据为空。
解决方法：在删除生产任务6之后成功之后，请求列表之前，加一段判断逻辑。当删除的数据为最后一页最后一条的时候，pageNo减1。
部分代码：

<div class="pagination
最低0.47元/天 解锁文章
antd 中pagination分页使用
m0_57457086的博客
12-15 4406
<a-pagination:total="totalCount":current="current":pageSize="10":item-render="itemRender" @change="handleChangePage"/> exportdefault{ name:"userIntegrate", components:{ Menu, }, data(){ return{ ...
【antd】使Pagination分页组件居中展示
all_might1的博客
06-25 5571
不想看长篇大论，直接跳转到解决方案咩 目录 一、问题描述 二、解决思路 1、忆往昔峥嵘岁月稠（以前好像解决过????） 2、正入万山圈子里，一山放过一山拦（居中但没完全居中????） 3、柳暗花明又一村（前人坑我????） 三、解决方案 1、单独使用分页组件 2、使用组件中分页api 四、感想心情 一、问题描述 接了一个以表格展示居多的需求，其中有关于table的分页展示内容。UI给的设计图中分页部分是居中展示的，但初始是居右侧展示所以样式需要修改
滑动到最后一页显示按钮
qq_43169246的博客
10-23 671
//布局 &amp;lt;android.support.v4.view.ViewPager android:id=&quot;@+id/vp&quot; android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_alignParentStart=“true” android:layout_alignPare...
element-ui，删除页面最后一条数据时，currentPage没有减一，页面列表为空
乐~的博客
05-28 4519
思路：监听页面的总条数，并对总条数进行判断。 当页面总条数 = （当前页数-1）*当前页条数，currentPage减1，重新获取列表 watch:{ pageTotal(){ if(this.pageTotal==(this.currentPage-1)*this.pageSize&& this.pageTotal!=0){ t...
antd table分页删除最后一条数据页码的问题
qq_38374019的博客
01-05 579
【代码】antd table分页删除最后一条数据页码的问题。
Antd的Table表中，对最后一页数据进行全部删除后，自动返回上一页的数据
weixin_46777355的博客
11-03 1776
Antd的Table表中，对最后一页数据进行全部删除后，如何自动回到上一页？如下：
el-pagination在删除非第一页的最后一条数据遇到的问题
最新发布
xixi_csdn的博客
05-29 1197
这个问题是element-ui中的问题，可以从源码中看出来，虽然页码更新了，active也是对的，但是未调用current-change的方法，这里就不是很合理。我先是在网上找的答案，然后改好之后去看的源码。因为大都是只说怎么改的，没有解析源码，我就记录一下；本来寻思这个问题我得去参与一下elementui的建设，给一无是处的工作添上一笔浓墨，谁知道elementui自2023年八月之后就不维护了，我又去看了elementplus，这个bug已经改好了。哎，发现的太晚了，太影响我赚钱了。
在表格里，删除最后一页的最后一条数据，点击删除确定时，当前页面内容为空，页码变成前一页，这种情况怎么处理？
yqw13989575652的博客
09-06 357
在表格里，删除最后一页的最后一条数据，点击删除确定时，当前页面内容为空，页码变成前一页，这种情况怎么处理？
antd table分页_react antd 分页，切换筛选条件之后分页组件没有默认第一页
weixin_39956443的博客
12-22 2789
每次切换筛选条件之后，分页组件当前页还停留在上次页面的当前页，没有默认切换到当前筛选条件的第一页，table数据渲染的是当前筛选条件的第一页，就是分页组件不对，请各位大神不吝赐教//点击分页handleTableChange = (page,pageSize) => {const { dispatch ,eventId} = this.props;const { pagination, Qu...
antd中分页器如何自定义_ant-design-vue Table组件和分页组件的自定义
weixin_39651816的博客
12-20 1862
最近在个新项目里开发CMS端，vue技术栈和antd的UI框架表格table使用链接：antd的table分页pagination使用链接：antd的pagination表格单独使用时，自带简单分页，只包含 上一页, 页面码, 下一页,例如：但是有时候产品和甲方的需求很奇葩，非得可选的pageSize，显示总数等功能，文档里有时候也阐述不全，甚至不对，关键时候还要靠自己动动脑子，看代码：//tem...
ant deign分页问题 删除列表最后一项自动跳转到上一页
qq_43710066的博客
03-13 346
解决删除列表最后一项，分页不跳转到上一页的问题
antd table表格删除末页数据，跳回上一页
weixin_44296432的博客
11-07 2902
当删除第二页的最后一条数据后，自动获取第一页 公共方法 export function calcPageNo (total, pageNo = 1, pageSize = 10, delNum = 1) { const restNum = total - pageSize * (pageNo - 1) let pageNoDiff = Math.floor((delNum - restNu...
element-ui el-pagination分页，新增表格数据后跳转到最后一页，成功跳转但分页器页码未显示到最新页
Lsiyi_的博客
09-21 705
1. :current-page.sync 中的 sync 标志 2. 给this.pagination.currentPage赋新值 3. ++this.total。这样this.total还是原来的值，但写成++this.total ，this.total会加1。// 在上一行更新好当前页码后，此处再请求后端获取当前页码的数据，即可跳转到最后一页。我这里表格内容跳到最新页了，但是分页器一直显示在倒数第二页。后来发现是this.total未更新，我原来写成。// 向后端发送新增数据请求。
vue中分页删除最后一条数据，返回上一页
weixin_60196946的博客
04-19 599
vue中分页删除最后一条数据，返回上一页
【删除列表中最后一条数据遇到的问题】
lytjiayou的博客
05-13 489
项目场景： 列表有多页数据，如果最后一页只有一条数据，当删除这条数据时，页码能够改变并且数据正确展示。 问题描述 当删除这条数据时，页码可以正确展示，但是数据没有正确显示 handleDelete(row) { const id = row.userId; this.$confirm( '是否确认删除学号为"' + row.userName + '"的数据项?', '警告', { confirmButtonTe
Ant Design，选择和操作Table后，点击下一页继续选择数据，当返回上一页时，之前选择的数据被清空
柠檬草的博客
01-06 653
react+antd 操作可选择的Table,选择第一页数据后，点击分页进入第二页继续选择，在返回第一页时数据被清空，如何保留被删除的key?
关于VUE3+TS+antd-vue遇到的坑之a-table返回数据大于pagination.pageSize数据不显示问题
LoveYouForever2的博客
05-14 1965
现在各个厂家都在把vue2转成3了，同时js转成ts了，评论区说说我们遇到的坑吧~~~~ 目录 首先先说一下标题遇到的问题：a-table返回数据大于pagination.pageSize数据不显示问题 首先先说一下标题遇到的问题：a-table返回数据大于pagination.pageSize数据不显示问题，这个是vue2-3都有的问题 我的代码：代码就先不让你们看了，毕竟写法是正确的 主要也是因为我每一页都会请求一次接口（加入pagesize是10那就只会请求10条数据），而antd-v.
vue ant 分页器问题
热门推荐
2c不高兴的博客
12-07 1万+
如图，10/page 需要引入 import zhCN from “ant-design-vue/es/locale-provider/zh_CN”; 然后在data里面声明下 <a-config-provider :locale="zhCN"> </a-config-provider> 用这个标签把 table 包起来 就可以了
tab页：ng-zorro-antd使用后台分页，获取数据、渲染数据
qq_36557846的博客
04-12 832
后台分页 1、获取栏目名称 2、通过栏目名称获取数据 3、点击栏目切换数据 4、点击分页切换数据 html代码 <!--获取栏目名称 --> <ul class="tabs d-flex"> <li *ngFor="let item of columns;let i=index" (click)="activeColumnIndex=i; handleMouseoverTab(item)" [class.active]="active
在react函数组件中怎么用antd中的分页
05-27
要在React函数组件中使用Ant Design的分页组件，你需要先安装Ant Design库，然后在你的组件中导入分页组件并使用。以下是一个简单的示例代码： ```jsx import React, { useState, useEffect } from 'react'; import...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值