Antd 中Table表格 在表格外选中表格数据

效果

 

实现方法

首先按照官方文档开启表格

1. 在table组件中添加  rowSelection 属性

const [selectedRowKeys, setSelectedRowKeys] = useState([]);//存储选中的数据

   <Table
        rowSelection={rowSelection}//开启表头选择
        columns={columns}
        loading={tableData.loading}
        dataSource={tableData.data}
        rowKey={(record) => record.id}
        pagination={false}
      />

 const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

2.添加CheckBox 

 <Checkbox 
  onChange={selectAll}//选择时的回调
  checked={tableData.data.length == selectedRowKeys.length} //控制选中状态
  style={{ marginLeft: 10 }}
>
选中本页
       
     <Button disabled={!selectedRowKeys.length > 0} style={{ marginLeft: 20 }}> 删除选中</Button>
        </Checkbox>

3. CheckBox的回调函数

  const selectAll = (e) => {
    let newSelect = [];//定义一个数组
    if (e.target.checked == true) {
      tableData.data.map((item) => {//遍历表格数据
        newSelect.push(item.id);//将每组数据下的key添加到定义的数组中
      })
      setSelectedRowKeys(newSelect)//修改选择数组
    } else {
      setSelectedRowKeys(newSelect)
    }
  };