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

相关推荐
Mr. zhihao2 小时前
Java 反序列化中的 boolean vs Boolean 陷阱:一个真实的 Bug 修复案例
java·bug·lua
初圣魔门首席弟子2 小时前
vscode多文件编程bug记录
java·vscode·bug
-雷阵雨-1 天前
软件测试全解析:Bug生命周期与争议解决
bug
南林yan1 天前
Bug: 升级内核后有线网络无法使用
bug
月巴月巴白勺合鸟月半1 天前
一个DevExpress的Docx文件处理的Bug的解决
c#·bug
ao_lang1 天前
软件测试-BUG篇
bug
技术小黑屋_1 天前
Vibe Coding 真正的问题并不是 Bug
bug
利来利往1 天前
lua table.remove引发的偶现bug
bug·lua·table.remove
haierccc1 天前
我发现了windows的tracert命令的一个bug---ICMP重定向包详尽分析
bug
2401_841495642 天前
Windows 系统中ffmpeg安装问题的彻底解决
windows·python·ffmpeg·bug·语音识别·下载·安装步骤