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

相关推荐
hui函数18 小时前
Python系列Bug修复|如何解决 pip install 报错 ModuleNotFoundError: No module named ‘pygame’ 问题
python·bug·pip
初圣魔门首席弟子19 小时前
BUG-001: 相对导入超出顶级包范围导致程序启动失败
bug
bbaydnog20 小时前
FreeRTOS学习笔记 17:资源管理与临界区保护——优先级反转、死锁,90%的RTOS bug都跟它有关
笔记·学习·bug
lili00122 天前
Claude自动修Bug配置优化与避坑指南
java·人工智能·python·bug·ai编程
小陶来咯3 天前
agent × 豆包:端到端语音实时交互
网络·ai·机器人·bug·交互
鬼才血脉4 天前
Idea使用Tomact运行项目,控制台输出中文乱码
tomcat·bug
NiceCloud喜云4 天前
Anthropic 发布 Project Glasswing:未公开模型 Mythos 已挖出 10000+ 漏洞,含 OpenBSD 27 年老 bug
android·java·数据库·c++·python·docker·bug
xufengzhu5 天前
臻识摄像头黑屏Bug 处理
bug·图像识别·摄像头
李永奉5 天前
杰理SDK开发-【BUG】软件开启音量同步连接华为、荣耀手机没有自动开启音量同步
单片机·嵌入式硬件·mcu·物联网·智能手机·bug·语音识别
堕2745 天前
软件测试bug篇
bug·压力测试