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

相关推荐
姚青&16 小时前
测试流程搭建
测试用例·bug·jira
mmsx20 小时前
return false 不是拦截:一次按键触发两个动作的事件冒泡陷阱
android·bug
随风丶飘2 天前
[特殊字符] 告别“update“和“fix bug“——Smart Git Commit LLM 让 AI 帮你写专业的 Git 提交信息
人工智能·git·bug
czhc11400756632 天前
崩溃复查与“回声“bug:异常码判案、漏网之鱼和耳塞开关
bug
mmsx3 天前
我明明调用了 zoomToBounds,地图却总是停在别处?延迟加到 5 秒也没用,真相只有一个
android·人工智能·bug·地图
mmsx3 天前
置灰按钮为什么自己又“亮“了?一次状态缓存“双写冲突“的排查记录
java·缓存·bug·livedata
MartinYeung54 天前
[bug 分析] Orchard 伪造漏洞: 深度代码剖析
安全·区块链·bug
为你奋斗!4 天前
禅道Bug导出CSV文件批量转Word+图片离线部署操作手册
word·bug
隔窗听雨眠6 天前
Library Cache Lock性能故障深度解析:JDBC驱动Bug、绑定变量长度与游标激增的连环效应
bug·library
盗理者6 天前
AI Agent 工程实践|让 AI Agent 自动修 Bug:定位、修改、测试与人工审核
人工智能·bug·agent