antd的Table组件使用rowSelection属性实现多选时遇到的bug

最新推荐文章于 2023-12-13 17:59:34 发布

原创

最新推荐文章于 2023-12-13 17:59:34 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bug

文章讨论了在AntDesign的Table组件中，如何在没有默认key属性时，通过设置rowKey为数据中的id来实现多选功能，避免出现异常选择效果。

前言

前端样式框架采用AntDesign时，经常会使用到Table组件，如果要有实现多选或选择的需求时往往就会用到rowSelection属性，效果如下
在这里插入图片描述

rowSelection属性属性值如下

在这里插入图片描述

问题

文档中并没有说明选择时以数据中的哪个属性为准，看官方案例是默认以名为key的属性为准，那如果我们项目要展示的数据没有key，而想要以数据中的id为准，该如何设置？
在这里插入图片描述

解决方法

在Table组件中明确指出rowkey是什么，如下以react为例：

<Table
              columns={comAnounceH}
              dataSource={commonNewsData}
              pagination={
  
  {
						 total: pageCount,
			              pageSize: 5
						}}
              rowSelection={
  
  {
					selectedRowKeys: this.state.selected