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

相关推荐
m0_7482398325 分钟前
前端bug调试
前端·bug
沙尘暴炒饭1 天前
关于uni-forms组件的bug【提交的字段[‘*‘]在数据库中并不存在】
bug
Kisorge2 天前
【C语言】代码BUG排查方式
c语言·开发语言·bug
安卓机器2 天前
探索 Python编程 调试案例:配置日志记录器查看程序运行bug
bug
树懒_Zz4 天前
记录 io.springfox 3.0.0 整合 spring boot 2.6.x 由于 springfox bug 引发问题
windows·spring boot·bug
每天进步一大步5 天前
webSokect安卓和web适配的Bug 适用实时语音场景
android·前端·bug·web
JWASX5 天前
【BUG记录】Apifox 参数传入 + 号变成空格的 BUG
java·bug·urlencoder·urldecoder
初遇你时动了情5 天前
解决react 路由切换,页面闪屏的bug
javascript·react.js·bug
老赵的博客5 天前
QString转const char* bug
bug
andlbds5 天前
解决PCL库中pcl::VoxelGrid降采样Bug
c++·bug