本文针对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}
/>
关键代码配置如下：
rowKey= {record => record.id}通过设置rowKey为数据中的id字段，可以明确告诉Table组件使用id作为行标识。若不进行此配置，在执行多选操作或设置默认选中状态时，可能会出现选择状态丢失、错乱或无法达到预期效果的现象。
总结
以上为个人在实际开发中总结的经验，希望能为遇到类似问题的开发者提供参考，也欢迎大家继续支持本站获取更多技术分享。