Ant Design Table 全选功能实现：如何选择所有数据

Ant Design Table 设置 selections: [Table.SELECTION_ALL] 为什么还是只选择了当前页的数据？\n\nTable.SELECTION_ALL 只会选择当前页的数据，如果你想选择所有数据，需要自定义 selections。\n\n你可以通过以下步骤自定义 selections：\n\n1. 设置一个 selectedRowKeys 数组，用于存储选中的行的 key。\n2. 在 rowSelection 属性中设置 selectedRowKeys，以及 onChange 回调函数，用于更新选中的行。\n3. 在 columns 属性中设置一个自定义的列，用于显示选择框。\n\n下面是一个简单的示例：\n\njsx\nimport React, { useState } from 'react';\nimport { Table } from 'antd';\n\nconst data = [\n { key: '1', name: 'John', age: 32 },\n { key: '2', name: 'Mike', age: 28 },\n { key: '3', name: 'Tom', age: 40 },\n // ...\n];\n\nconst MyTable = () => {\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 const columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n // ...\n {\n title: 'Selection',\n dataIndex: 'selection',\n render: (_, record) => (\n <input\n type="checkbox"\n checked={selectedRowKeys.includes(record.key)}\n onChange={() => onSelectChange([record.key])}\n />\n ),\n },\n ];\n\n return <Table dataSource={data} columns={columns} rowSelection={rowSelection} />;\n};\n\nexport default MyTable;\n\n\n这样就可以实现选择所有数据的功能了。\n