Ant-Design中Table组件rowSelection方法的一些坑

最新推荐文章于 2025-06-18 17:57:21 发布

原创最新推荐文章于 2025-06-18 17:57:21 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

基础同时被 2 个专栏收录

27 篇文章

订阅专栏

react

18 篇文章

订阅专栏

本文详细解析了Ant Design中的Table组件如何通过rowSelection属性实现联动选择框功能，强调了正确设置rowKey的重要性，避免因dataSource顺序变化导致的选择状态异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

在 <Table/> 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。

API中说到通过 rowSelection.selectedRowKeys 来控制选中项。比较坑的是，selectedRowKeys 控制的只是dataSource当前的顺序编号。

一定要加上rowKey="id"或者rowKey={record => record.id}，后来经过多次调试发现很多BUG都跟这个参数有关，不然会导致联动的选择框状态异常。id可以自定义为dataSource中的某个值。

         <Table
              rowSelection={rowSelection}
              columns={this.state.columns}
              rowKey={(record) => record.courseId}
              dataSource={this.state.courseList}
              loading={this.state.loading}
              pagination={{
                defaultPageSize: this.state.limit,
                current: this.state.page,
                total: this.state.totalCount,
                onChange: this.pageChange.bind(this)
              }}/>