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 天前
NodeVerdict | 性能门禁:把追踪数据变成 CI 规则
ci/cd·信息可视化·开源·node.js·bug·数据可视化·安全架构
qingmiaozhuan3 天前
软件测试Bug复现高清录屏标准流程:新手入门与规范指南(2026实战版)
bug·电脑录屏·电脑录屏软件·测试录屏规范·音画同步录制
凌云拓界4 天前
NodeVerdict:Node.js 原生诊断数据可视化工具
信息可视化·架构·typescript·开源·node.js·github·bug
蓝天下的守望者8 天前
验证环境中使用队列的pop_front()思维惯性引发的bug
bug
一只小菜鸡..8 天前
南京大学 操作系统 (JYY) 学习笔记:并发 Bug 的地狱——数据竞争、死锁与原子性违反
笔记·学习·bug
名字还没想好☜9 天前
React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复
前端·javascript·react.js·bug·react·next.js
陈 洪 伟10 天前
大模型推理引擎vLLM(30):由一个GLM5 bug,整理MLP中的SwiGLU、算子融合、量化相关问题
bug·mlp·vllm
endeavor1211 天前
BUG(记录)
bug
不断学习加努力13 天前
使用rviz2进行可视化时,cpu资源占用过高的bug
bug
happyness4413 天前
如何利用 AI 自动编写单元测试(Unit Test)来捕捉隐藏的边缘情况 Bug?
人工智能·单元测试·bug