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

相关推荐
hust_a20 小时前
利用AI定位BUG的体验
bug
初圣魔门首席弟子3 天前
bug【已解决】腾讯 WorkBuddy 无法访问:校园网限制导致的网络问题排查全记录
bug
乐兮创想 小林5 天前
企业官网的运维分工模型:内容自助、Bug 终身免费修与服务器托管的边界设计
运维·服务器·bug·网站建设·企业官网·北京网站建设公司
菠萝猫yena5 天前
bug描述规范
bug
乐兮创想 小林5 天前
生物科技官网的工程化设计:产品×应用二维信息架构、多语言与国际化 SEO 实践
运维·服务器·bug·网站建设·企业官网·北京网站建设公司
调问开源问卷DWSurvey5 天前
调问更新5.16~5.30:解锁Excel图片上传,修复多项高频体验Bug
bug
胡图图不糊涂^_^6 天前
测试BUG篇
学习·bug·测试
搬石头的马农6 天前
从零配置Claude自动修Bug:6步打造全自动开发流程
java·人工智能·python·bug·ai编程
winlife_6 天前
让 AI 自动跑 PlayMode 回归测试:从 BUG 注入到自动判 FAIL 的完整闭环
人工智能·unity·bug·ai编程·mcp·回归测试·游戏测试
坚果的博客6 天前
Flutter OHOS SDK 版本目录校验 Bug 修复实战
flutter·bug