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

相关推荐
小此方3 天前
「插曲:Git」企业规范篇:DevOps开发模型、Git Flow五类分支设计与测试/预发布/生产环境Bug修复及Hotfix紧急发布流程
git·bug·devops
中文英文-我选中文4 天前
FreeRTOS 玄学Bug:调换任务创建顺序,程序时而正常、时而死机(栈溢出内存踩踏深度复盘)
bug
Keven_115 天前
BUG:UVA116
算法·bug·图论
鬼手点金5 天前
opencode-隐私优先配置
服务器·前端·javascript·bug·openclaw
itmigrate6 天前
异步请求竞态,藏在页面渲染里的隐形bug
bug
今夕资源网7 天前
OmniVoice 今夕整合包 本地语音TTS断网可用 修复了一些BUG 优化生成速度 极速秒生成
bug·语音克隆·omnivoice·断网可用·本地语音tts·语音tts
烧烧的酒0.o11 天前
Codex桌面版更新后不能使用最新模型问题-排查修复总结
chatgpt·bug
sg_knight13 天前
ZCode Bug 定位实战:把报错丢给 ZCode,它是怎么修的
llm·bug·agent·ai编程·glm·智谱·zcode
轩轶子14 天前
Python CLI Todo:一次数据结构错误引发的 Bug
数据结构·python·bug
鬼手点金14 天前
Claude Code示范案例-修复 Bug 工作流
java·服务器·前端·javascript·bug·openclaw