Antd Table 全选功能实现: 选择所有数据而非仅当前页

"Antd Table 全选功能实现: 选择所有数据而非仅当前页"\n\n本文介绍如何在 Ant Design Table 中使用 rowSelection 属性实现全选功能，确保选择所有数据而不是仅当前页的数据。并提供示例代码和解释，帮助你快速解决问题。\n\n要实现全选时选择所有数据，而不仅仅是当前页的数据，可以使用 rowSelection 的 onChange 属性来处理全选逻辑。以下是一个示例代码：\n\njavascript\nimport React, { useState } from \"react\";\nimport { Table } from \"antd\";\n\nconst dataSource = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York No. 1 Lake Park\",\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 1 Lake Park\",\n },\n {\n key: \"3\",\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\",\n },\n {\n key: \"4\",\n name: \"Jim Red\",\n age: 32,\n address: \"London No. 2 Lake Park\",\n },\n];\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\",\n },\n];\n\nconst App = () => {\n const [selectedRowKeys, setSelectedRowKeys] = useState([]);\n\n const onSelectChange = (selectedRowKeys) => {\n setSelectedRowKeys(selectedRowKeys);\n };\n\n const rowSelection = {\n selectedRowKeys,\n onChange: onSelectChange,\n };\n\n return (\n <Table\n rowSelection={rowSelection}\n columns={columns}\n dataSource={dataSource}\n pagination={false}\n />\n );\n};\n\nexport default App;\n\n\n在这个示例中，我们使用 useState 来定义一个 selectedRowKeys 的状态来存储选择的行的 key 值。然后，我们定义了一个 onSelectChange 函数来更新 selectedRowKeys 状态。最后，我们将 selectedRowKeys 和 onSelectChange 分别传递给 rowSelection 的 selectedRowKeys 和 onChange 属性。\n\n这样，当你点击全选时，onSelectChange 函数会被调用，将所有行的 key 值存储在 selectedRowKeys 状态中，实现了全选功能。