antd table rowSelection删除某行后仍然选中

解决表格数据选中与刷新问题
最新推荐文章于 2025-03-25 18:01:03 发布
原创 最新推荐文章于 2025-03-25 18:01:03 发布 · 364 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

探讨在删除表格中的某条数据后，重新加载列表时出现的第一条数据被默认选中的现象。分析问题根源在于selectedRowKeys使用了错误的row标识方式，提供通过设置rowKey为记录id来解决问题的方法。

问题

如图，删除选中的第一条表格数据，重新获取列表数据时，第一条数据被默认选中

image.png

原因

如图，selectedRowKeys中存放的是row的index，删除后 index=被删除的index 还会存在

设置： rowKey={record => record.id} 后正常

image.png
刘承瑜
关注
Ant Design Vue - 手动清空表格复选框勾选状态（复选框打勾残留）
🏆 前端领域优质创作者
12-24 1万+
ant design vue table清空选中，antd vue表格组件添加复选功能 残留问题，表格批量删除后选中框残留问题，ant中table表格的多选框如何清空，ant design table 复选框，操作之后有残留，解决antd-vue表格批量操作选中框仍残留的问题，当我们批量删除数据后，表格的数据内容更新了，但是每行前面的选中框还是选中的状态，有残留，
Vue中使用antd-table组件实现数据选择、禁用、已选择禁用-demo
JackieDYH的博客
04-07 368
2、当状态为1时，表示之前已经选择过，显示状态为勾选并禁用状态，禁止取消。selectStatus: "0", // 0未选中 1选中 2不可选。注意：表头上的全选按钮，只能操作状态为0的数据，其他数据不能操作。1、当状态为0时，表示前台页面可以自由选择和取消。3、当状态为2时，表示不可选择，显示为禁用状态。表格根据从后端获取的数据进行状态显示和控制。
elementUI中el-table多选表格数据删除后，再次删除时复选框依旧是选中状态
rong0914的博客
07-15 3930
1.点击删除后数据为空 2.再次搜索单号一进界面就保持了已选状态，我检查了删除的选中的数据为空，所以唯一的情况是界面显示不正常 3.于是查了文档得出在清空之后所选数据之后要另外添加一句。dataTable是table用ref添加的名字。clearSelection()是elementUI内部的方法。 this.$refs.dataTable.clearSelection(); //清除之前的选中状态 ...
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据
agua001的博客
04-22 8371
vue3 使用antd Table组件中 rowSelection 时发现选中项 selectedRowKeys 清空没有效果，叠加了上次的选中数据
React+AntDesign:关于table的rowSelection在多选批量删除后仍为选中状态
Alanrnzearn的博客
04-22 4282
本来是准备删除完了以后表格默认不选中的，但是发现选中状态并没有清掉，还是保留着下面的展示效果，觉得头疼，后面仔细查看了官方文档API后，通过尝试找到了解决办法。 2. 这块主要是用到一个selectedRowKeys属性，通过设置这个属性就可以实现在执行删除命令成功后数据就不会默认被选中原来的id位置了，附上代码如下： // table表格部分的代码 <Table rowKey="id" locale={{ emptyText: <Empty /> }} r.
解决antd-vue表格批量操作选中框仍残留的问题
peppa_pig的博客
11-13 2694
对数据批量操作成功，将选中的值selectedRowKeys值清空后，值虽然为空但是选择框依旧是选中状态，下面是解决方法 操作成功后将值清空 这样写就能将选择框
引用antd表格时使用rowSelection,切换分页时,之前选择的数据丢失
weixin_44137098的博客
08-14 609
例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大)
antd-Table组件表格，初次进来默认全部勾选
outstanding木槿
03-25 367
3、更新后的数据在rowSelection函数中赋值： selectedRowKeys: selectArr。id存在一样的情况，所以不能的单独用id作为唯一标识，可以用id和seq结合作为标识。下面这个的表格数据不同于上面，下面这个seq分两组，一组2025，一组2000。函数组件：1、声明一个空数组，存放勾选的唯一id值。2、onSelectChange函数中更新数据。
antd Table组件selectedRows翻页或重新搜索后未保留上一页已选中数据
xiasohuai的博客
12-02 1331
antd Table组件selectedRows翻页或重新搜索后未保留上一页已选中数据
react 使用antd 的table组件，批量操作后还存留之前的打钩项
zoepriselife316的博客
10-11 1457
官网提供一个方法代码如下： import { Table, Button } from 'antd'; const columns = [{ title: '姓名', dataIndex: 'name', }, { title: '年龄', dataIndex: 'age', }, { title: '住址', dataIndex: 'address', }]; con...
antd Radio 实现点击取消选择
weixin_45456092的博客
04-21 4349
【代码】【无标题】
react antd table可增删表格项
坚强的泡沫的博客
05-10 713
react antd table可增删表格项
React antd 表格新增 表格修改 删除 表格数据回显
qq_42704945的博客
06-08 6106
弹窗中就设置form的initValues就是穿过来的formValue的值，如果是新增的时候就是一个空对象，然后新增的每一项的值填写一个才有一个，如果需要默认值的话就需要设置对象合并{默认值,…这种方式就是通过判断在点击修改的数据对formValue的值判断只有这个值的key长度不为零才渲染修改的组件，这里采用了两个同一个组件的方式，通过不同的弹窗状态去判断显示是新增还是修。这种方式通过form.resetFields();form.setFieldsValue方式设置form的值。
表格添加rowSelection这个属性之后遇到的一些bug
weixin_50685099的博客
01-12 845
antd vue table 选择框选择删除后再删除选择的还是上一次的索引
ant Table rowSelection勾选后更新数据无法清除缓存（无法取消勾选）
weixin_34007020的博客
02-23 2449
问题描述：如上图所示，ant.design中使用Table中的rowSelection单选框功能；在勾选了数据之后进行操作后重新请求数据，发现新的数据仍然被勾选，我们希望看到的效果当然是刷新数据后勾选取消掉，毕竟是新数据嘛。。。 首先是在官网上照着写的一个方法：原代码： clearCheck = () =&gt; { // 处理勾选数据后...
Ant-Design-Pro中Table组件rowSelection方法的一些坑
热门推荐
永不消失的彩虹的博客
09-06 4万+
<Table rowSelection={rowSelection} columns={columns} dataSource={data} /> 在 <Table/> 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。 API中说到通过 rowSelection.selectedRowKeys 来控制选...
低碳生产汽车多阶段研讨会中的混合模型调度序列优化.zip
最新发布
12-03
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
智慧物流微信小程序项目是一个集成了在线下单实时追踪智能调度与在线支付等核心功能的综合性物流服务平台_该小程序旨在为发货方收货方及物流服务商提供全流程数字化解决方案发货方可便.zip
12-03
智慧物流微信小程序项目是一个集成了在线下单实时追踪智能调度与在线支付等核心功能的综合性物流服务平台_该小程序旨在为发货方收货方及物流服务商提供全流程数字化解决方案发货方可便.zip
xiaoyuediandao_script-analysis-system_26436_1764666198649.zip
12-03
xiaoyuediandao_script-analysis-system_26436_1764666198649.zip
vue2 antd a-table 设置取消某一行的选中状态
11-09
在Vue2中使用Ant Design的Table组件（a-table）时，如果你想允许用户取消某一行的选中状态，通常你可以通过监听`rowSelection`对象的`change`事件来实现。假设你已经设置了table的`rowSelection`属性，并且它支持`selectMultiple`（是否可以多选）和`selectedRowKeys`（当前选中的行键值）。 首先，在数据列表（data）中添加一个`key`字段，这通常是自增的数字或者某个唯一标识： ```javascript data() { return { tableData: [ { key: '1', ... }, // 表格的数据项 { key: '2', ... }, ... ], selectedRowKeys: [], // 初始时无选中行 } } ``` 然后，在methods中设置事件处理函数： ```javascript methods: { handleSelectChange(selectedRowKeys, selectedRows) { // 当选择变化时，这里操作selectedRowKeys this.selectedRowKeys = selectedRowKeys; // 更新选中行的键值 // 如果你想获取具体的对象而不是键值，可以根据需要过滤或查找 const rowsToUncheck = selectedRows.filter(row => { // 检查你想取消选中的那一行 return row.key === 'yourDesiredKey'; // 替换为你需要取消的行的key }); if (rowsToUncheck.length > 0) { this.selectedRowKeys = this.selectedRowKeys.filter(key => key !== rowsToUncheck[0].key); } } } ``` 最后，在`<a-table>`组件上绑定`rowSelection`属性并监听`change`事件： ```html <a-table :rowSelection="{ onChange: handleSelectChange }" :data="tableData"> <!-- 表头和列配置 --> </a-table> ``` 当用户点击某一行取消选中，`handleSelectChange`会被触发，然后更新`selectedRowKeys`来实现该行的取消选中状态。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值