Ant Design Table组件rowSelection多选配置：正确设置rowKey解决选择异常

作者：小齿轮时间：2026-10-31 15:19:31浏览：274

本文针对Ant Design Table组件在使用rowSelection实现多选功能时，因未明确指定rowKey导致的默认选择或状态同步异常问题，提供了基于React的解决方案。通过显式配置rowKey属性指向数据唯一标识（如id），可确保选择逻辑与数据模型一致，避免官方文档未明确说明的潜在陷阱。

前言

在前端开发中，若项目采用Ant Design作为样式框架，

开发者通常会频繁调用Table组件来展示数据列表。

当业务需求涉及数据的多选或单项选择功能时，

通常需要依赖Table组件提供的rowSelection属性来实现交互效果。

问题

官方文档中并未详细阐述在用户进行选择操作时，系统内部依据数据对象的哪个属性来识别当前选中项。

观察Ant Design的官方示例代码，可以发现其默认行为是假设数据对象中包含名为key的属性，并以此作为唯一标识。

然而，在实际项目中，后端返回的数据结构往往不包含key字段，

而是使用id或其他字段作为唯一标识。此时，若直接沿用默认配置，可能会导致选择状态与数据不一致，该如何正确配置以实现以id为准的选择功能？

解决方法

解决该问题的核心在于，在Table组件中显式声明rowKey属性的值。

以下以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}
            />

关键代码配置如下：