Ant Design Table 组件：选择项点击回调函数 `onSelect` 和 `onSelectAll` 的用法

在 Ant Design 的 Table 组件中，可以使用 rowSelection 属性来定义表格的选择功能。在这个属性中，可以设置 onSelect 和 onSelectAll 属性来定义选择项点击回调。\n\nonSelect 属性定义了当某一行被选中或取消选中时的回调函数。它接收两个参数：当前选中的行的 key 和当前选中的行的所有数据。示例代码如下：\n\njsx\nimport { Table } from 'antd';\n\nconst data = [\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 App = () => {\n const onSelect = (selectedRowKeys, selectedRows) => {\n console.log(selectedRowKeys, selectedRows);\n };\n\n const rowSelection = {\n onSelect,\n };\n\n return (\n <Table dataSource={data} rowSelection={rowSelection}>\n <Table.Column title="Name" dataIndex="name" key="name" />\n <Table.Column title="Age" dataIndex="age" key="age" />\n <Table.Column title="Address" dataIndex="address" key="address" />\n </Table>\n );\n};\n\nexport default App;\n\n\nonSelectAll 属性定义了当全选复选框被选中或取消选中时的回调函数。它接收一个参数：全选复选框的选中状态（true 为选中，false 为取消选中）。示例代码如下：\n\njsx\nimport { Table } from 'antd';\n\nconst data = [\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 App = () => {\n const onSelectAll = (selected) => {\n console.log(selected);\n };\n\n const rowSelection = {\n onSelectAll,\n };\n\n return (\n <Table dataSource={data} rowSelection={rowSelection}>\n <Table.Column title="Name" dataIndex="name" key="name" />\n <Table.Column title="Age" dataIndex="age" key="age" />\n <Table.Column title="Address" dataIndex="address" key="address" />\n </Table>\n );\n};\n\nexport default App;\n\n\n以上示例代码中，在控制台打印了选中的行的 key 和数据，以及全选复选框的选中状态。你可以根据需求在回调函数中进行相应的操作。