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

前言

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

rowSelection属性属性值如下

问题

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

解决方法

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

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,否则在进行选择、或者实现默认选择时会出现离奇现象,总是到不到想要的效果

相关推荐
csdn_aspnet21 小时前
Git二分法精准定位Bug,分享用git bisect快速锁定引入缺陷的提交,提升调试效率
git·bug·二分查找
R6bandito_1 天前
自实现FLASH读取函数中的隐式类型转换bug踩坑记录
c语言·开发语言·经验分享·stm32·单片机·mcu·bug
奶茶精Gaaa1 天前
精彩bug--连续接受消息快速点击聊天页出现消息重叠
bug
奶茶精Gaaa1 天前
精彩bug--带图片+文字消息打开图片显示格式损坏
bug
奶茶精Gaaa1 天前
精彩bug--每次发版页面不会自动清缓存
bug
qq_452396232 天前
【测试之道】第六篇:缺陷管理论 —— Bug 的生态位、生命周期与根因分析(RCA)
功能测试·bug·软件工程
赵庆明老师2 天前
宝塔Linux面板Bug修复:添加反向代理出错
linux·运维·bug
qq_452396232 天前
【测试之道】第七篇:非功能性测试 —— 性能、安全与兼容性:构建软件的“硬核”防御
功能测试·安全·bug·软件工程
22信通小白3 天前
USRP初学者使用手册(基础配置及bug记录)——Windows+MATLAB
windows·matlab·bug
G果4 天前
ros2工程 debug(vscode)
c++·ide·vscode·编辑器·bug·debug·ros2