antd rowSelection多选框翻页清空前一页选中的问题

最新推荐文章于 2025-01-16 09:26:17 发布

半夏不会前端

最新推荐文章于 2025-01-16 09:26:17 发布

阅读量1.8k

点赞数 3

文章标签： javascript 前端 typescript

本文链接：https://blog.youkuaiyun.com/weixin_43963525/article/details/123133067

版权

本文探讨了在使用antd库进行前端开发时遇到的一个常见问题：当在表格中使用rowSelection进行多选操作，并在翻页后前一页的选中状态被清除。分析了问题产生的原因，并提供了解决方案，包括状态管理优化和使用getCheckboxProps定制行为，确保选中状态在页面切换时得到正确维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

				//设id为key
				 rowKey={
   record => record.id}
                //复选框选中操作
                rowSelection={
   {
   
                  //当使用 rowSelection 时，请设置 rowSelection.preserveSelectedRowKeys 属性以保留 key
                  preserveSelectedRowKeys:true,
                  //选中的行
                  selectedRowKeys

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

半夏不会前端

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3 - ant design vue3表格组件a-table实现“从弹框表格列表中选择记录数据，已被选择的行数据记录不允许再次在表格中勾选”，同时实现表格的分页勾选、跨页选择并回显对号，详细代码

高级前端工程师

07-19

4895

vue3，nuxt3，antd3，ant design vue3，ant表格，Table，a-table，表格跨页勾选，已经选了的数据怎么禁止勾选，Table的数据多选，多页选择数据回显，分页记录保存选中的数据，从另一个表格列表中勾选数据，antd3实现table组件跨页多选，已选择数据禁止第二次重复选择，分页弹窗中跨页多选选择数据后添加到页面中，已经选择过的数据则置灰不让重复选择，表格选中的数据回显勾选状态以及禁止再次选中，antd-vue实现a-table跨页勾选以及解决全选异常，记忆勾选，选中刷新之后

antdesign vue中table表格选中项的清除问题

热门推荐

m0_52457943的博客

04-01

1万+

项目场景：最近做项目的时候用到了antdesign 框架中的table表格，可以选择表格项从antd官网复制的下面方法，点击其他按钮刷新selectedRowKeys发现清除不了选中项的缓存如下图所示，选中项再打开页面仍然存在问题描述按照antd官网的方法 <template> <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" /> </template&gt

1 条评论您还未登录，请先登录后发表或查看评论

vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据

agua001的博客

04-22

8138

vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据

ant Table rowSelection勾选后更新数据无法清除缓存（无法取消勾选）

weixin_34007020的博客

02-23

2416

问题描述：如上图所示，ant.design中使用Table中的rowSelection单选框功能；在勾选了数据之后进行操作后重新请求数据，发现新的数据仍然被勾选，我们希望看到的效果当然是刷新数据后勾选取消掉，毕竟是新数据嘛。。。首先是在官网上照着写的一个方法：原代码： clearCheck = () => { // 处理勾选数据后...

ant Design3中使用table的rowSelection选中前一页数据会被清空

weixin_42496938的博客

06-14

863

antd3官方组件的onChange方法在分页重新加载数据的时候，会将selectedRows清空。使用preserveSelectedRowKeys可以保留。

antd 库的 Table 组件中删除一个或多个选中的列表

wbskb的博客

08-05

1155

React 中在 antd 库的 Table 组件中删除一个或多个选中的列表

antdv vue3 table可选多选翻页前一页的选项会被清空解决

qq_44792224的博客

07-18

918

preserveSelectedRowKeys 当数据被删除时仍然保留选项的 key。

vue之a-table中实现清空选中的数据

12-13

a-table组件有很多属性，其中`:rowSelection`是与选中行相关的属性。该属性是一个对象，用于设置表格的行选择功能。其基本用法包括： - `selectedRowKeys`: 这是一个数组，用于存储被选中行的key值。 - `onChange`:...

antd table 行选择 rowSelection 各种情况

zhuangjiajia09的专栏

06-14

2255

本文记录了 antd 的table 使用时行的选择时用到的一些地方

checkbox实现全选和清空

weixin_42387547的博客

06-06

1万+

<input type="hidden" name="kmdm" id="kmdm"/><a href="javascript:void(0);" onclick="selectAll()">全选</a> / <a href="javascript:void(0);" onclick=&amp

Antd Table rowSelection切换导致选中的数据丢失

Cahier

07-22

2827

官网例子没有这个问题是因为它的 table 数据是一次通过接口拉下来的，后续分页不在请求接口，而实际情况是需要点击一次分页拉一次数据就导致 table 重新渲染导致selectedRowKeys数据丢失。解决方案： preserveSelectedRowKeys 当数据被删除时仍然保留选项的 key boolean - 4.4.0 当使用 rowSelection 时，请设置 rowSelection.preserveSelectedRowKeys 属性以保留 key。 const rowSelec

react antdesign table组件翻页后selectRows丢失的问题

m0_63861061的博客

04-17

604

出现的原因为，table组件仅持有了selectedRowKeys，selectRows则通过selectedRowKeys去table数据查找，其他页的数据丢失查找不到，则返回undefined。关闭modal后再次打开modal回显选中的数据，此时再次选择数据会丢失其他页的数据，表现为其他页的selectRows为undefined，rowSelection新增preserveSelectedRowKeys: true解决。

react antd表格翻页时记录勾选状态

u010234868的专栏

07-03

1013

属性来控制勾选状态，并添加preserveSelectedRowKeys: true以保留 key。设置rowKey属性。

ant-design-vue的

最新发布

黎小小的博客

01-16

191

在中，是用于组件的一项属性，主要作用是控制在表格数据变化（如分页、过滤、排序等）时，是否保留已选择行的rowKey。

antd a-table组件点击下一页时，选中数据丢失问题的解决

逆风优雅的博客

10-25

3296

在a-table组件中，因为我们要点击下一页，那么如何保存我们在当前页储存的数据呢？首先，给s-tabel添加一个选中行的方法， :rowSelection="{ onSelect: onSelect, onSelectAll: onSelectAll, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 其次，我们在methods中，对我们的方法进行处理。在data中定义一个字段，用于储存我们点击改行时，要获取...

antd的表格有多选框时翻页记住之前选择的数据

slow097的博客

08-05

2849

antd的table表格数据有提供多选框的功能,只要设置rowSelection属性就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。，为 true时会在数据更新之后记住之前选择的数据。（需要指定rowKey）antd提供了preserveSelectedRowKeys，类型为。...

el-table组件选中后使用toggleRowSelection无法取消已选中的数据——bug记录-骚操作解决

yehaocheng520的博客

05-14

1976

el-table组件选中后使用toggleRowSelection无法取消已选中的数据——bug记录-骚操作解决

:row-selection=“rowSelection“ 清除勾选复选框

qq_36428598的博客

08-24

555

【代码】:row-selection=“rowSelection“ 清除勾选复选框。

element plus e-table表格中使用多选,当翻页时已选中的数据丢失

Front小思的博客

10-21

1323

因为表格分页，点击会刷新第一页的数据的，只会加载第二页的数据，前面页面的数据是拿不到的，上面的还是不行的话加入@selection-change，当选择项发生变化时会触发该事件回调selection！:reserve-selection=“true” （写在el-table-column中type为select的行中）解决办法： :row-key=“getRowKeys” （写在el-table中）点击第一页选中两个，再选择第二页，选中，回到第一页，之前选中的要保留！记录选中的，但是最傻了！

如何清空 antd rowSelection中的选中状态

05-24

你可以通过以下两种方法清空 antd 的 `rowSelection` 中的选中状态： 1. 通过 `rowSelection` 的 `selectedRowKeys` 属性来清空选中状态。 ```jsx const [selectedRowKeys, setSelectedRowKeys] = useState([]); ...