react antd 关于selectedRows 的问题

在table中,经常会用到单选和多选的功。这里会有一个方法,

 

 当触发onchange的时候回有两个数组,【selectedRowKeys, selectedRows】,当前选中的keys和每一项,

这里说的是selectedRows的一个bug,当在一个页面点击选中

 

 这里是一个用户,但是当点击分页的时候,再次增加用户点击,选中的用户就会出现bug,上次选中的用户就会消失,而只显示你在当前页面选中的用户。

 

 简单来说: 就是你在第一页面选了三个人,再次点击分页(或者是查询,更换当前页的数据)选人;上次的三个人就会不见。显示的人数是你现在点击选中的人数;

这就是在使用selectRows遇到的bug;

我所使用的解决方法 : 

 selectedRowKeys:是没有这个bug的;

用selectedRowKeys的key;和你所有的数据进行匹配;

 

转载于:https://www.cnblogs.com/zhanghongkun/p/11431335.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd 的 Table 组件中,如果需要实现表格跨页勾选的功能,可以通过 rowSelection 的 onSelect、onSelectAll 事件来实现。具体步骤如下: 1. 在 Table 组件中设置 rowSelection 属性,并设置 selectedRowKeys 和 onChange 属性。 2. 在 onChange 事件中,将选中的行的 key 值存储到一个数组中。 3. 在 onSelect、onSelectAll 事件中,将选中的行的 key 值存储到一个数组中,并将该数组与 onChange 事件中的数组合并。 4. 在 render 方法中,通过判断当前行的 key 值是否在选中的 key 数组中来设置该行是否被选中。 下面是一个示例代码: ```jsx import React, { useState } from 'react'; import { Table } from 'antd'; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Disabled User', age: 99, address: 'Sidney No. 1 Lake Park', disabled: true, }, ]; const App = () => { const [selectedRowKeys, setSelectedRowKeys] = useState([]); const onSelectChange = (selectedRowKeys) => { setSelectedRowKeys(selectedRowKeys); }; const onSelect = (record, selected) => { const keys = selectedRowKeys.slice(); if (selected) { keys.push(record.key); } else { const index = keys.indexOf(record.key); if (index > -1) { keys.splice(index, 1); } } setSelectedRowKeys(keys); }; const onSelectAll = (selected, selectedRows, changeRows) => { const keys = selectedRowKeys.slice(); if (selected) { changeRows.forEach((record) => { keys.push(record.key); }); } else { changeRows.forEach((record) => { const index = keys.indexOf(record.key); if (index > -1) { keys.splice(index, 1); } }); } setSelectedRowKeys(keys); }; const rowSelection = { selectedRowKeys, onChange: onSelectChange, onSelect, onSelectAll, }; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; return ( <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={{ pageSize: 2 }} /> ); }; export default App; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值