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

相关推荐
木棉知行者4 小时前
【第2篇】RuntimeError: nms_impl: implementation for device cuda:0 not found.
人工智能·深度学习·bug·mmdetection
DB!!!4 小时前
【bug】系统CA证书毁坏导致找不到有效的 OpenPGP 数据
bug
中冕—霍格沃兹软件开发测试17 小时前
测试用例库建设与管理方案
数据库·人工智能·科技·开源·测试用例·bug
lvchaoq1 天前
解决组件不能远程搜索的问题
前端·bug
Vanranrr1 天前
一个由非虚函数导致的隐藏Bug:窗口显示异常问题排查与解决
开发语言·bug
AllinGold1 天前
vscode等IDE使用ssh远程连接云服务器ECS,连接不上的通常问题
bug
测试人社区—84162 天前
Postman API测试指南
人工智能·git·测试工具·自动化·bug·postman
万粉变现经纪人2 天前
如何解决 pip install 网络报错 403 Forbidden(访问被阻止)问题
数据库·python·pycharm·beautifulsoup·bug·pandas·pip
测试人社区—84162 天前
Appium移动自动化测试:从入门到精通实战
人工智能·安全·appium·自动化·bug·postman
Wokoo72 天前
软件测试分类与BUG管理
功能测试·单元测试·bug·集成测试·压力测试·ab测试