ant design 的table组件实现全选功能

需求：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
  }