antd-table-react（在table组件外实现全选）

效果图如下：

 

代码实现：

import styles from './index.less';
import React, { useEffect, useState } from 'react';
import { Table, Button} from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  disabled: boolean;
}

const data: DataType[] = [
  {
    key: '0',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    disabled: false,
  },
  {
    key: '1',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    disabled: false,

  },
  {
    key: '2',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    disabled: false,

  },
  {
    key: '3',
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
    disabled: true,
  },
];

export default function IndexPage() {
  const [selectedRowKeys, setSelectedRowKeys]=useState([]);
  const [selectedRows, setSelectedRows]=useState([]);
  const [newData, setNewData]=useState([]);
  useEffect(()=>{
    // 过滤disabled为false的数组
    const afterFliterData:any = data.filter(v=>v.disabled===false);
    setNewData(afterFliterData);
  },[]);
  const handleChange = (selectedRowKeys:any, selectedRows:any)=>{
    setSelectedRowKeys([...selectedRowKeys]);
    setSelectedRows([...selectedRows]);
    console.log(selectedRowKeys, selectedRows);
  };
    // 全选的方法
 const selectAll =()=>{
  // 若已经是全选状态，当再次点击全选按钮的时候，则就执行取消全选操作；
  // 若不是全选状态，点击全选按钮的时候，就执行全选操作
   if(newData.length===selectedRows.length){
     handleChange([],[]);
   } else {
    newData.forEach((v,i)=>{
      if(selectedRows.indexOf(v)===-1){
        selectedRowKeys.push(String(i));
      }
     })
    handleChange(selectedRowKeys,[...newData]);
   }
};

const rowSelection :any= {
  selectedRowKeys,
  hideSelectAll: 'true',
  onChange: handleChange,
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', 
    // name: record.name,
  }),
};
  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <Button type="primary" onClick={selectAll} >全选</Button>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
}