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

相关推荐
技术人生黄勇6 小时前
GitNexus 把代码库变成知识图谱|审核 AI 产出更清晰,改 Bug 更精准
人工智能·bug
黑夜里的小夜莺14 小时前
黑马点评登录成功后点击【我的】会跳转到登录页面 BUG 修复
java·bug
熟人看不到1 天前
解决Claude Code界面错位更新不及时-Windows
bug·vibecoding·claude code
深念Y1 天前
踩坑实录:把 Windows 默认 PowerShell 换成 7.x 到底有多坑?一条龙解决指南
windows·乱码·bug·控制台·powershell·管道·流式
油炸自行车1 天前
【Qt bug排查】Qt项目debug模式下,关闭可视化界面后,后台程序不退出,依然在打印log
bug
SoraShim2 天前
2026实测:深入理解Gemini 3 Pro镜像站链式思考提示工程,三步解决复杂Bug定位
bug
AI 编程助手GPT3 天前
GPT-5.6意外曝光、Claude安全检查全面公测、Grok 4.3搅局价格战——多模型混战的五月,开发者如何避坑?
人工智能·gpt·ai·chatgpt·bug·ai编程
Zxxxxxy_4 天前
测试入门:从 0 到 1 搞懂开发与 Bug
bug
专注VB编程开发20年5 天前
Windows API 所有老式结构体4字节对齐,但是64位VBA,Twinbasic弄成了8字节对齐,大BUG
windows·bug
IT枫斗者6 天前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug