antd Table组件rowSelection方法的一些坑：table组件多选时，会选中上一页或者下一页的表格同行数据

Amtion123

于 2022-07-09 16:27:53 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45486264/article/details/125694772

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在Ant Design的Table组件中，如何使用rowSelection实现选择框功能，并通过rowKey参数确保数据正确显示。特别强调了rowKey的重要性，指出其与数据联动状态的关联，以及在分页场景下避免选中状态异常的解决方案。通过设置rowKey为记录的唯一id，可以确保每页表格数据的正确选中状态。

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

<a-table
  :rowSelection="rowSelection"
  :columns="columns"
  :dataSource="dataSource"
>
</a-table>

在 table 组件中有 rowSelection方法，可以让Table的第一列成为联动的选择框。 API中说到通过
rowSelection.selectedRowKeys 来控制选中项。比较坑的是，selectedRowKeys
控制的只是dataSource当前的顺序编号。

需要注意的是：

在这里插入图片描述

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

问题：

类似选中某页的几行数据，在修改、删除等操作后，其他分页的表格数据的行是选择状态，而不是我们选中的行数据。这是因为没有区分每页表格的id。
在这里插入图片描述

解决：

<a-table
  :rowSelection="rowSelection"
  :columns="columns"
  :dataSource="dataSource"
  :rowKey="row => row.id"
>
</a-table>