Ant Design的表格组件 在表格外面设置一个全选按钮控制表格全选/反选 详细代码

Ant Design的表格组件提供了一个Checkbox组件用于全选控制，可以通过以下步骤实现：

1. 在columns数组中添加一个Checkbox列，设置render函数返回Checkbox组件。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '',
    key: 'checkbox',
    render: (text, record) =>
      <Checkbox onChange={() => handleCheckboxChange(record)} />
  },
];

2. 在Table组件外部添加一个Checkbox组件，设置onChange函数控制表格全选/反选。

const [selectedRowKeys, setSelectedRowKeys] = useState([]);

const handleCheckboxChange = (record) => {
  const rowKey = record.key;
  const selectedRowKeysCopy = [...selectedRowKeys];
  const index = selectedRowKeysCopy.indexOf(rowKey);
  if (index >= 0) {
    selectedRowKeysCopy.splice(index, 1);
  } else {
    selectedRowKeysCopy.push(rowKey);
  }
  setSelectedRowKeys(selectedRowKeysCopy);
};

const handleCheckAllChange = (e) => {
  if (e.target.checked) {
    const keys = data.map((record) => record.key);
    setSelectedRowKeys(keys);
  } else {
    setSelectedRowKeys([]);
  }
};

<Checkbox onChange={handleCheckAllChange}>Select All</Checkbox>
<Table
  columns={columns}
  dataSource={data}
  rowSelection={{
    selectedRowKeys,
    onChange: setSelectedRowKeys,
  }}
/>

这样就可以在表格外部添加一个全选的Checkbox，控制表格的全选/反选功能了。同时也需要注意，在Table组件中添加rowSelection属性，用于控制选中的行。