需求：ant design 的table元件中，點選表頭的選擇框可以實現全選的效果，但有時根據業務需求，需要在表格外面新增一個選擇框，點選實現全選的效果，如圖所示。

實現方法：

1、新增一個checkbox

2、 在table元件中新增  rowSelection 屬性

定義該屬性

 // 選擇行
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };
 

3、實現全選方法  

// 全選的方法
  selectAll = () => {
    // data 是這頁面表格的所有資料
    const { data } = this.props;
    // selectedRows 為state中存放的選中的表格行
    const {selectedRows} = this.state;
    if(data.length === selectedRows.length){
      this.handleRowSelectChange([],[]);
    }else{
      //把索引數組裡的值由String轉換成Number
      const keys = Object.keys(data)
      const index = [];
      keys.forEach(item=>{
        index.push(Number(item))
      });
      this.handleRowSelectChange(index,data)
    }
  };

// 全選函式
// 傳入選中的行的序號ID 和 選中的行
  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    // 在 state中 維護這個狀態
    this.setState({
      selectedRowKeys: selectedRowKeys,
      selectedRows: selectedRows,
    });
  };
 

4、實現 CheckBox 的選中狀態

//改變全選按鈕的選中狀態

const {data} = this.props;
const keys = Object.keys(data);
let isChecked = null
if(keys.length === selectedRowKeys.length){
    isChecked=true
  }else{
    isChecked=false
  }