antd table设置rowSelection selections全选以后仍然只选择了当页的数据
要实现全选时选择所有数据,而不仅仅是当前页的数据,可以使用 rowSelection 的 onChange 属性来处理全选逻辑。以下是一个示例代码:
import React, { useState } from "react";
import { Table } from "antd";
const dataSource = [
{
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: "Jim Red",
age: 32,
address: "London No. 2 Lake Park",
},
];
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Age",
dataIndex: "age",
key: "age",
},
{
title: "Address",
dataIndex: "address",
key: "address",
},
];
const App = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const onSelectChange = (selectedRowKeys) => {
setSelectedRowKeys(selectedRowKeys);
};
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
return (
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={dataSource}
pagination={false}
/>
);
};
export default App;
在这个示例中,我们使用 useState 来定义一个 selectedRowKeys 的状态来存储选择的行的 key 值。然后,我们定义了一个 onSelectChange 函数来更新 selectedRowKeys 状态。最后,我们将 selectedRowKeys 和 onSelectChange 分别传递给 rowSelection 的 selectedRowKeys 和 onChange 属性。
这样,当你点击全选时,onSelectChange 函数会被调用,将所有行的 key 值存储在 selectedRowKeys 状态中,实现了全选功能
原文地址: https://www.cveoy.top/t/topic/hMeK 著作权归作者所有。请勿转载和采集!