我在使用Table 的选择和操作这个用法的时候,会出现第一页全选了什么,第二页也选了什么。在我选择了第二页之后,输出selectedRowKeys,得到的数据和选择第一页,废话不多说,看图:
第二页和第一页一样,就不放了,下面是selectedRowKeys的输出
下面是代码:
//代码:
const columns = [{
title: '优惠券名称',
dataIndex: 'name',
key: 'name',
}, {
title: '类型',
dataIndex: 'type',
key: 'type',
}, {
title: '面值及门槛',
dataIndex: 'amountUseThreshold',
key: 'amountUseThreshold',
}, {
title: '剩余/总量',
dataIndex: 'oddAccount',
key: 'oddAccount',
}];
const data = [];
const data = items.map(item => {
var coupon = {};
coupon.name = item.name;
coupon.type = COUPON_TYPE[item.type];
coupon.amountUseThreshold = item.amount+','+item.name;
coupon.oddAccount = (item.count-item.releasedCount)+'/'+item.count;
return coupon
})
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const rowSelection = {
selectedRowKeys,
onChange: handleSelectChange,
};
function handleSelectChange(selectedRowKeys) {
setSelectedRowKeys(selectedRowKeys);
console.log(selectedRowKeys,'selectedRowKeys')
}
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
style={{width:'100%'}}
pagination={{
size: "small",
showQuickJumper: true,
pageSize:5,
}}
/>
解决:
第一种办法: 在 data 的每个对象中,添加一个 key,比如在我的代码中:
const data = items.map(item => {
var coupon = {};
//添加下面一行代码
coupon.key = item.couponId;
//其他省略
...
})
第二种办法:在 Table 的属性中添加rowKey这个属性,比如在我的代码中:
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
//添加下面一行代码,另外要说的是 name 是 data 每个对象中的一个属性,这个自己可另设的,而写了这一行代码后,selectedRowKeys输出会变成这个数据的 name,而不会是这个数据的 index
rowKey={record => record. name}
pagination={{
size: "small",
showQuickJumper: true,
pageSize:3,
}}
/>
``