antd的Table组件使用rowSelection属性实现多选时遇到的bug

Ant Design Vue1.7.8中table多选,table选择后进行操作,table可控的筛选,完成后清空选择,通过 rowSelection.selectedRowKeys 来控制选中项。 阅读详情

前言

前端样式框架采用AntDesign时,经常会使用到Table组件,如果要有实现多选或选择的需求时往往就会用到rowSelection属性,效果如下
在这里插入图片描述

rowSelection属性属性值如下

在这里插入图片描述

问题

文档中并没有说明选择时以数据中的哪个属性为准,看官方案例是默认以名为key的属性为准,那如果我们项目要展示的数据没有key,而想要以数据中的id为准,该如何设置?
在这里插入图片描述

解决方法

在Table组件中明确指出rowkey是什么,如下以react为例:

<Table
              columns={comAnounceH}
              dataSource={commonNewsData}
              pagination={{
						 total: pageCount,
			              pageSize: 5
						}}
              rowSelection={{
					selectedRowKeys: this.state.selectedRowKeys,
                    onSelect: (record, selected, selectedRows, nativeEvent) => {
                      this.updateSelectData(selected, Array(1).fill(record))
                    },
                    onSelectAll: (selected, selectedRows, changeRows) => {
                      this.updateSelectData(selected, changeRows)
                    },
				}}
              rowKey= {record => record.id}
            />

关键代码rowKey= {record => record.id},指明rowKey为数据中的id,否则在进行选择、或者实现默认选择时会出现离奇现象,总是到不到想要的效果

antd Table 自定义控制多选框显示与隐藏 【代码】antd Table 自定义控制多选框与单个显示与隐藏。 阅读详情

相关推荐

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

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

agua001的博客 8487

Antd Table组件rowSelection方法的一些坑

Antd Table组件rowSelection方法的一些坑 当table组件多选时,会将所有的表格数据全部选中。 在组件中官网有提供rowSelection方法,可以让Table的第一列成为联动的选择框以及通过rowSelection.selectedRowKeys来控制选项。比较坑的是 selectedRowKeys控制的只是dataSource当前的序号,必须加上rowKey={record =>record.userId},如果不加上会导致联动的选择框异常,rowKey的id可以自定义为dat

lml21lml的博客 9828

React中后台开发实战:Ant Design核心组件与性能优化指南

在现代前端开发中,组件库是提升开发效率、保障设计一致性的关键技术。其核心原理在于提供一套预构建、可复用的UI组件,遵循统一的设计规范,从而将开发者从繁琐的底层样式和交互逻辑中解放出来。这种技术方案的价值在于能够显著加速中后台管理系统、企业级应用等复杂界面的构建过程,确保产品的视觉统一与用户体验。Ant Design作为React生态中广受认可的企业级UI组件库,正是这一理念的杰出实践。它通过开箱即用的高质量组件,如功能强大的Form表单和Table表格,帮助开发者高效处理数据收集、校验、展示与交互等核心场景

weixin_30325487的博客 368

antd table rowSelection多选框(可选择列表)

可选择列表 如上图,是antd的可选择列表,我们如何将普通列表变成可选择列表呢,这就用到了一个很重要的属性rowSelection。 rowSelection 如下图,rowSelection属性是一个对象,他有很多的参数。 下面是antd官网截图,关于rowSelection的功能配置。 指定可选择列的属性作为key 注意:其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项,如果你想指定key,就要在table增加rowKey={record => record.id}

MYG_G 2万+

React18与Antd5后台管理系统实战:架构设计、权限控制与性能优化复盘

在构建企业级Web应用时,前端框架与UI组件库的选型直接影响开发效率与系统稳定性。React凭借组件化与生态优势,成为B端管理系统的常用选择;Antd作为成熟的React组件库,提供丰富的表格、表单与权限交互方案。深入理解React的渲染机制与并发特性,结合Antd的主题定制与工程化实践,能有效解决复杂后台场景下的状态管理、动态路由与大数据量渲染问题。从基础的表单校验、Token刷新,到进阶的虚拟滚动与构建优化,系统化掌握这些技术原理,有助于提升应用的可维护性与用户体验。本文基于React18与Antd5的

weixin_34138056的博客 409

蓝桥杯单片机省一经验分享1:基础篇.含详细代码与应试技巧

含详细代码、驱动修改与应试技巧

qq_53529450的博客 1万+

antd 表格的多选/单选框:rowSelection

获取选中的框{ 1、定义在rowSelection中,然后监听onChange事件,给selectedRowKeys赋值 rowSelection:{type:'radio',onChange: this.selectChange,getCheckboxProps:this.getCheckboxProps,selectedRowKeys:[]} selectChange (...

汤迷的博客 8374

ViViT视频分类实战:从Tubelet Embedding到4种Attention变体的保姆级解析

本文深入解析ViViT(Video Vision Transformer)在视频分类中的实战应用,重点介绍Tubelet Embedding技术和4种Attention变体的实现细节。通过对比分析Spatio-Temporal、Factorised Encoder等不同Attention机制的性能特点,提供工程优化策略和Kinetics数据集上的实战示例,帮助开发者掌握这一前沿视频理解技术。

weixin_29292535的博客 386

antd Table rowSelection 多选状态与跨页实战

在 React 后台列表里,表格多选并不是简单加一列 checkbox,而是围绕 rowSelection、selectedRowKeys 与 rowKey 建立一套可控的选择状态模型。其原理是用稳定唯一键标识行,用选中 keys 数组驱动勾选,再通过 onChange 回写状态,从而明确“选中的真值”由谁持有。做好这一点,能显著降低勾选错位、回显失败、跨页选中丢失、全选与半选语义混乱等问题,也能为批量删除、导出、改状态、分配权限等场景提供可靠基础。面对分页、筛选、排序与大数据量渲染时,还要结合 prese

weixin_33836874的博客 381

基于Simulink/Matlab的VSG并网系统单相接地与相间短路故障仿真建模与特性分析

本文详细介绍了基于Simulink/Matlab搭建虚拟同步发电机(VSG)并网系统仿真模型的方法,并重点分析了单相接地与相间短路故障下的系统特性。通过设置三相故障模块参数,模拟了故障发生时的电压、电流变化及VSG动态响应,为理解故障机理、优化控制策略及设计继电保护提供了仿真依据与实践指导。

t8u9v0w1x的博客 514

结构设计3D拆件与骨架模型构建实战:基于Creo 8.0的5个高效建模技巧

本文详细解析了基于Creo 8.0的结构设计3D拆件与骨架模型构建实战技巧,涵盖5个高效建模方法,包括参数化驱动、曲面分割、多实体协同设计等。通过骨架模型的智能应用,设计效率可提升30%以上,特别适合复杂产品的结构设计。文章还提供了TWS耳机充电仓等实战案例,帮助工程师快速掌握工业设计中的核心建模技术。

weixin_30000735的博客 568

antd Table rowSelection 多选避坑:rowKey与跨页

在 React 后台系统中,表格多选是批量删除、审核、导出等操作的基础交互。其核心原理是用唯一 rowKey 把每一行数据与 selectedRowKeys 建立稳定映射,再通过 rowSelection 受控维护勾选状态;一旦 rowKey 缺失或类型不一致,翻页、刷新后就会出现选中错位,甚至误操作。正确配置 getCheckboxProps、preserveSelectedRowKeys,并处理跨页选择、树形联动和大数据量下的查找性能,可以显著提升多选表格的可靠性与可维护性。这类能力广泛用于订单发货、权

weixin_34323858的博客 367

【YOLOv8/v9/v10 实战 01】YOLOv8/v9/v10全系列实战对决:性能矩阵、架构拆解与2026部署指南

2026年YOLO生态已进入“战国时代”,Ultralytics YOLOv8/11/26、阿里YOLO12、清华YOLOv10、微软YOLOv9四大路线并行发展。本文基于官方文档、学术论文及实测数据,系统剖析三大核心版本(YOLOv8/v9/v10)的架构演进逻辑,构建覆盖参数量、mAP、FPS、FLOPs的完整性能矩阵。通过8组工业场景实测、全流程代码实现(训练-导出-部署)、6类硬件适配方案,解决新手选型难、进阶者优化无门、工业开发者部署低效的痛点。

专注于人工智能、软件开发、工控自动化、工厂数字化及智能化等领域,希望和大家共同进步! 533

antd Table rowSelection 跨页多选与批量操作避坑

在中后台前端开发中,表格多选与批量操作依赖一套受控的选中状态管理。其核心是让 rowSelection 由 selectedRowKeys 驱动,通过 rowKey 唯一标识、onChange 同步变化,并用 preserveSelectedRowKeys 与独立数据池维护跨页选中;getCheckboxProps 则负责条件禁用与权限约束。这样能保证选择集合与数据源强一致,减少幽灵 ID、重复请求和导出缺行等问题,在批量删除、批量导出、批量审核等场景中提升可靠性与可追踪性。围绕 antd Table ro

weixin_30399155的博客 404

【基础-单选】Row组件中有两个Text组件,如果使用justifyContent对齐方式,下面哪个属性可以实现左右两端对齐:

Row组件中有两个Text组件,如果使用justifyContent对齐方式,下面哪个属性可以实现左右两端对齐

江拥羡橙的博客 1302

AS7341可见光谱传感器原理图设计,已量产(光线传感器)

最近在做便携式环境光光谱检测项目时,我们基于 ams 的 AS7341 搭了一套硬件电路 —— 这颗芯片算是业内新一代的光谱传感 IC,8 个可见光通道 + NIR + 闪烁检测的配置,加上 6 路并行 16 位 ADC,数据吞吐能力确实够顶。今天就拆解下这个模块的硬件设计细节,聊聊实际做板时的那些考量点。

不脱发的程序猿 639

antd Table组件rowSelection方法的一些坑:table组件多选时,会选中下一页的表格同行数据

<Table rowSelection={rowSelection} columns={columns} dataSource={data} /> 在 <Table/> 组件中有 rowSelection={rowSelection} 方法,可以让Table的第一列成为联动的选择框。 API中说到通过 rowSelection.selectedRowKeys 来控制选中项...

u010565037的博客 2万+

【TC3xx芯片】TC3xx DMA模块详解

TC3xx DMA模块详解

qq_36056498的博客 5915

antd Table组件rowSelection方法的一些坑:table组件多选时,会选中上一页或者下一页的表格同行数据

antd Table组件rowSelection方法的一些坑:table组件多选时,会选中上一页或者下一页的表格同行数据 需要注意的是: 一定要加上rowKey="id"或者rowKey={record => record.id},后来经过多次调试发现很多BUG都跟这个参数有关,不然会导致联动的选择框状态异常。id可以自定义为dataSource中的某个值。类似选中某页的几行数据,在修改、删除等操作后,其他分页的表格数据的行是选择状态,而不是我们选中的行数据。这是因为没有区分每页表格的id。...

Amtion的博客 2894

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

Ant-Design中Table组件rowSelection方法的一些坑

<Table rowSelection={rowSelection} columns={columns} dataSource={data} /> 在 <Table/> 组件中有 rowSelection={rowSelection} 方法,可以让Table的第一列成为联动的选择框。 API中说到通过 rowSelection.selectedRowKeys 来控制选...

Haines 2357

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

antd table 单选或者多选的默认选中行设置

antd 的table 默认选中bug 话不多说,先上官方文档 主要设置 rowSelection 设置默认选中行,需要 onChange 和 selectedRowkeys 配合 思路: 默认设置selectedRowKeys的值,onChange事件触发的时候再改变selectedRowKeys。 部分代码如下 const [selectedRowKeys, setSelectedRowKeys] = useState([]) ···省略··· <Table rowKey="id

weixin_45748897的博客 7181

react antd table表格点击一行选中数据的方法

antd的table,默认是点击左边的单选/复选按钮,才能选中一行数据;现在想实现点击右边的部分,也可以触发操作选中这行数据。可以使用onRow实现,样例如下。

BHSZZY的博客 6844

React antd Table点击下一页后selectedRows丢失之前页选择内容的问题

使用了React antd 的其中有然后。

BHSZZY的博客 1607

antd的table默认选中和点击选中

class User extends Interval { constructor(props) { super(props); this.state = { synCode: [], } } render() { console.log(this.state.synCode); ...

x_u_xiang的博客 8418

antd vue表格组件添加复选功能 残留问题

antd vue的表格组件功能中有一个,添加复选框选择行的功能,可以用来实现批量删除(应用场景之一),但是使用的时候才发现,这个onChange方法中的selectedRowKeys有残留。 解决: <a-table :columns="columns" :data-source="tableData" bordered size="small" :row-selection="{selectedRowKeys:selectedRowKeys,onChange:rowChange}

qq_41604498的博客 1018
上一篇: Java中的高级特性与最佳实践
下一篇: Excel宏标记在所有工作表中标记关键字(以域名为例)并将结果输出到另一张Sheet
JavaWizard-M
博客等级 码龄6年 3159粉丝 148原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值