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

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

开发需求：点击按钮对列表数据进行全选和反选的功能。使用react框架开发前端项目的时候，使用的是ant design的前端ui组件库，使用的table组件中，只是点击表头的选择框可以实现全选的效果，但有时根据业务需求，需要在表格外面添加一个选择框，点击实现全选的效果，如图所示。这个时候就得需要自己去额外的进行代码逻辑的实现。

分析上图的需求可知，需要在图表的底部新增一个复选框的按钮，点击复选框的时候可以实现列表的数据全选和反选的功能。

1、第一步：首先添加一个checkbox，通过它相关的api事件添加一个onChange方法，在复选框状态改变的时候被触发；其次添加是否选中的checked状态，给他赋予一个boolean值

2、第二步引入table组件，在table组件中添加 rowSelection 的属性，该属性表示表格行是否可选择。

然后定义该属性， selectedRowKeys：指定选中项的 key 数组，需要和 onChange 进行配合； onChange：选中项发生变化时的回调； getCheckboxProps：选择框的默认属性配置。

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

3、第三步：定义一个selectAll()方法，实现全选方法。方法中的data数据是从接口获取的到当前列表的数据，在state中存放selectedRows，表示当前列表选中的行。该handleRowSelectChange()方法需要传如两个参数，第一个参数为列表的选中的索引组成的数组，第二个参数为列表的数据。当判断当前列表的数据长度和选中的列表数据长度相同的时候，表示当前列表数据处于全选的一个状态，点击全选复选框的时候，会触发handleRowSelectChange([],[])方法传入两个空的数组，取消选中的状态，否则传入所有的数据索引和数据，是列表数据被全部选择

// 全选的方法
  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
  }