Ant Design Table 跨页选择项丢失解决方案 - 如何保持选中状态

{"title":"Ant Design Table 跨页选择项丢失解决方案 - 如何保持选中状态","description":"本文介绍如何解决 Ant Design Table 组件中自定义选择项跨页后未选中数据的问题。通过设置 `rowSelection` 属性和监听全选 Checkbox 的变化，可以实现跨页后保持选中状态。","keywords":"Ant Design, Table, 跨页, 选择项, 选中状态, 全选, rowSelection, getCheckboxProps","content":"在 Ant Design 的 Table 组件中，可以使用 `rowSelection` 属性来实现自定义选择项。要解决跨页后未选中数据的问题，可以使用以下步骤：\n\n1. 首先，在 Table 组件中添加 `rowSelection` 属性，并设置 `getCheckboxProps` 属性为一个函数，用于自定义 Checkbox 的属性。\n\njsx\nimport \{ Table \} from 'antd';\n\nconst MyTable = () => {\n const [selectedRowKeys, setSelectedRowKeys] = useState([]);\n\n const rowSelection = {\n selectedRowKeys,\n onChange: (selectedKeys) => {\n setSelectedRowKeys(selectedKeys);\n },\n getCheckboxProps: (record) => ({\n // 自定义 Checkbox 的属性，可以根据需要设置是否选中\n checked: selectedRowKeys.includes(record.key),\n }),\n };\n\n return (\n <Table\n rowSelection={rowSelection}\n columns={columns}\n dataSource={data}\n pagination={pagination}\n />\n );\n};\n\n\n2. 接下来，当用户选择所有数据时，需要将所有数据的 key 存储到 `selectedRowKeys` 中。可以通过监听全选 Checkbox 的变化来实现。\n\njsx\nconst MyTable = () => {\n const [selectedRowKeys, setSelectedRowKeys] = useState([]);\n const [allDataKeys, setAllDataKeys] = useState([]);\n\n const rowSelection = {\n selectedRowKeys,\n onChange: (selectedKeys) => {\n setSelectedRowKeys(selectedKeys);\n },\n getCheckboxProps: (record) => ({\n checked: selectedRowKeys.includes(record.key),\n }),\n };\n\n // 监听全选 Checkbox 的变化\n const handleSelectAll = (e) => {\n const checked = e.target.checked;\n\n if (checked) {\n // 如果选中了全选 Checkbox，将所有数据的 key 存储到 selectedRowKeys 中\n setSelectedRowKeys(allDataKeys);\n } else {\n // 如果取消选中全选 Checkbox，清空 selectedRowKeys\n setSelectedRowKeys([]);\n }\n };\n\n useEffect(() => {\n // 更新所有数据的 key\n const keys = data.map((item) => item.key);\n setAllDataKeys(keys);\n }, [data]);\n\n return (\n <Table\n rowSelection={rowSelection}\n columns={columns}\n dataSource={data}\n pagination={pagination}\n />\n );\n};\n\n\n这样，当用户选择了所有数据后，无论跨页与否，都会保持选中状态。同时，取消选择全选 Checkbox 也会清空选中的数据。