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

相关推荐
不爱记笔记2 天前
GPT-5.6 Sol 真实项目实测!Bug修复、UI重构与帆船游戏复刻
人工智能·gpt·ui·chatgpt·bug·openai
蒙塔基的钢蛋儿3 天前
记一次 STM32H723 硬件 Bug 排查:写个 ETH 寄存器,SDRAM 数据飞了
stm32·嵌入式硬件·bug
wok1575 天前
Git Bash 执行中文命令报错 127:MSYS 参数编码 bug 排查与修复
git·bug·bash
李永奉6 天前
杰理可视化SDK开发-【BUG】AC7006F8更换AC7006F6芯片添加双备份OTA升级功能报代码端空间不足问题
bug
结实的洋葱6 天前
为啥程序会有bug?
bug
stevenzqzq6 天前
解决复杂bug思路
bug
namexingyun6 天前
Scaling Law bug实战启示:从“虚胖“到“精瘦“的算力效率革命
开发语言·网络·人工智能·bug·ai编程
callJJ1 个月前
Volta + Claude Code 在 Windows 上的路径 Bug 复盘
windows·bug
xsc-xyc1 个月前
记一次RK3568搭建NAS BUG:开发板插上 USB 移动硬盘没反应
bug
放风铃的兔子1 个月前
我把 5 个 Python bug 投进 CubeSandbox 当沙盘 —— 从 envd 协议反编译到一键 RED→GREEN
bug·issue