antd table 多选 数据缓存问题

在使用Antd的Table组件实现多选功能时,遇到选中数据缓存问题,即批量操作后,之前的选中状态未清除。解决方案是通过在state中定义一个数组存储选中key,并在rowSelection中设置selectedRowKeys和onChange回调,实时更新state,确保每次操作只反映当前选中的数据。
摘要由CSDN通过智能技术生成

业务需求:可以勾选当前页数据、下一页数据进行批量操作。

其实antd本身可以支持上述业务需求。

但:出现的问题如下

(1)当我勾选多条并点击批量拒绝后,再次多选进行操作时,查看选中数据不仅仅是当前选中的数据,还包含上次选中的数据。

(2)当我选中多条进行操作成功后,之前被选中的数据依然被选中

解决方案:

antd自带的示例demo其实是有问题的。不能将onchange事件都放在state中.

修正后如下:

1. 在state定义一个数组用来存储key

this.state = {

      selectedRowKeys: []

}

2. 在render中定义

const {selectedRowKeys } = this.state;

    const rowSelection = {

      selectedRowKeys, // 一定要加这行,解决缓存

      onChange: (selected

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值