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

相关推荐
0白露1 天前
关闭搜狗输入法右下角广告,可以适用于大多数应用系统通知的广告
windows·bug
一只自律的鸡2 天前
【Linux驱动】bug处理 ens33找不到IP
linux·运维·bug
Lichenpar3 天前
Springboot采用FastJson2作为MessageConverter时,配置的全局日期类型序列化转换BUG
java·开发语言·bug
Irene19914 天前
AI 找 bug 的局限性 和 Deepseek 优势明显
bug
癫狂的兔子4 天前
【bug】【Python】pandas中的DataFrame.to_excel()和ExcelWriter的区别
python·bug
癫狂的兔子5 天前
【BUG】【Python】【Spider】Compound class names are not allowed.
开发语言·python·bug
netkiller-BG7NYT5 天前
阿里云语音合成CosyVoice重大BUG被我发现了
bug
马猴烧酒.6 天前
【Mybatis出现bug】应为 <statement> 或 DELIMITER,得到 ‘id‘
java·bug·mybatis
请叫我大虾6 天前
发现一个jdk中ArrayList的小BUG
android·java·bug
离离茶6 天前
【笔记1-10】Qt bug记录:dockwidget通过raise在最前面显示,toolbar的拓展菜单失效
笔记·qt·bug