react antdesign在table 表格外添加一个复选框 实现全选或取消全选

可以在表格外部添加一个复选框，并使用state来保存其选中状态。然后在表格的列定义中加入一个render函数，渲染出每行的复选框，并根据表格外的复选框状态来决定是否选中。最后，在表格外的复选框的onChange事件中，更新state，同时也更新表格中所有复选框的选中状态。

以下是一个示例代码：

import React, { useState } from 'react';
import { Table, Checkbox } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street'
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street'
  }
];

const columns = [
  {
    title: '',
    dataIndex: 'selected',
    render: (text, record) => <Checkbox checked={record.selected} onChange={e => handleRowCheckboxChange(e, record)} />
  },
  {
    title: 'Name',
    dataIndex: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age'
  },
  {
    title: 'Address',
    dataIndex: 'address'
  }
];

const App = () => {
  const [selectAll, setSelectAll] = useState(false);
  const [data, setData] = useState(dataSource.map(item => ({ ...item, selected: false })));

  const handleSelectAllChange = e => {
    const checked = e.target.checked;
    setSelectAll(checked);
    setData(data.map(item => ({ ...item, selected: checked })));
  };

  const handleRowCheckboxChange = (e, record) => {
    const checked = e.target.checked;
    setData(data.map(item => (item.key === record.key ? { ...item, selected: checked } : item)));
    setSelectAll(data.every(item => item.selected));
  };

  return (
    <>
      <div>
        <Checkbox checked={selectAll} onChange={handleSelectAllChange}>
          Select All
        </Checkbox>
      </div>
      <Table dataSource={data} columns={columns} />
    </>
  );
};

export default App;

在这个示例中，我们使用useState来维护表格外的复选框选中状态和表格数据的选中状态。在表格列定义中，我们通过render函数来渲染出每行的复选框，并根据表格数据的选中状态来决定是否选中。在表格外的复选框的onChange事件中，我们更新state，同时也更新表格数据的选中状态。