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

相关推荐
嵌入式×边缘AI:打怪升级日志1 天前
9.2.3 UART 驱动严重 Bug(保姆级讲解)
bug
qq_24218863323 天前
代码诊疗室——疑难Bug破解战
bug
Moshow郑锴5 天前
Java SpringBoot 疑难 Bug 排查思路解析:从“语法正确”到“行为相符”
java·spring boot·bug
人间花海5 天前
BUG终结者:挑战你的调试极限
bug
2401_858286116 天前
OS54.【Linux】System V 共享内存(3) “共享内存+管道“修bug记录
linux·运维·服务器·算法·bug
Kurbaneli7 天前
代码诊疗室——疑难Bug破解战
bug
Mr -老鬼9 天前
从 0 到 1 落地:Rust + Salvo 实现用户系统与 Bug 管理系统
开发语言·rust·bug
剑亦未配妥9 天前
CSS 折叠引发的 scrollHeight 异常 —— 一次 Blink 引擎的诡异 Bug
前端·css·bug
gfdgd xi9 天前
GXDE OS 25.3.1 更新了!修复更多 bug 了!
linux·c++·操作系统·bug·deepin
Groundwork Explorer10 天前
wiznet5k.py硬件驱动w5500芯片网卡bug
bug