如何让Ant design 中table父子数据递归关联选择

实现原因

会使用ant design的都知道，当我们的dataSource中有children时，table将会生成一个扩展列，扩展列可缩放。
但是官网也向我们说明目前的扩展暂不支持父子数据递归关联选择。所有今天我们来手动实现

1，定义一个简单的数据结构

const data = [
      {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
        children: [
          {
            key: 11,
            name: 'John Brown',
            age: 42,
            address: 'New York No. 2 Lake Park',
          },
          {
            key: 12,
            name: 'John Brown jr.',
            age: 30,
            address: 'New York No. 3 Lake Park',
          }
        ],
      },
      {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
    ];

2，定义表头

const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: '12%',
      },
      {
        title: 'Address',
        dataIndex: 'address',
        width: '30%',
        key: 'address',
      },
    ];

3，写点击选择框的方法 rowSelection

1，定义判断是否为父的函数

const selectFather = (_data, _key) => {
  let result = null
  for (let dl = 0; dl < _data.length; dl += 1) {
    if (_data[dl].key !== _key) {
      if (_data[dl].children !== null && _data[dl].children !== undefined) {
        for (let tDl = 0; tDl < _data[dl].children.length; tDl += 1) {
          if (_data[dl].children[tDl].key === _key) {
            result = {
              isFather: false,
              fID: _data[dl].key
            }
            return result
          }
        }
      }
    }
    else {
      result = {
        isFather: true,
        fID: _key
      }
    }
  }
  return result
}

该方法 是用作判断当前的数据是否为父级，可能有人会说 直接用存在children来判断。但是由于数据不一定有children数据，所有用此方法判断吧~。

2，在state中定义selectKey

在state中定义selectKey,用作保存点击的数据

3，rowSelection方法

代码如下

const rowSelection = {
      selectedRowKeys:selectKey,
      onSelectAll: (selected, selectedRows, changeRows) => {
        let tempSelectKey = []
        for (let item = 0; item < selectedRows.length; item += 1) {
          tempSelectKey.push(selectedRows[item].key)
        }
        this.setState({selectKey:tempSelectKey})
      },
      onSelect: (record, selected, selectedRows) => {
        let result = selectFather(data, record.key)
        if (selected === true) {
          let keyList = []
          if (result.isFather === true) {
            if(record.children !==undefined && record.children !== null){
              for (let item = 0; item < record.children.length; item += 1) {
                keyList.push(record.children[item].key)
                  }
            }
            let tempSelectKey =[]
            for (let item = 0; item < selectedRows.length; item += 1) {
              tempSelectKey.push(selectedRows[item].key)
            }
            for (let item = 0; item < keyList.length; item += 1) {
              tempSelectKey.push(keyList[item])
            }
            this.setState({selectKey:tempSelectKey})
          }
          else{
            let fatherList = []
            let tempSelectKey =[]
            for (let item = 0; item < data.length; item += 1) {
              if(data[item].key === result.fID){
                fatherList = data[item].children
              }
            }
              let chackSelected = true
            let selectLength = 0
           
            for (let item = 0; item < fatherList.length; item += 1) {
              for (let cItem = 0; cItem < selectedRows.length; cItem += 1) {
                if(selectedRows[cItem].key === fatherList[item].key ){
                  selectLength +=1
                }
              }
            }
            if(selectLength !== fatherList.length){
              chackSelected = false
            }
           
            if(chackSelected){
              tempSelectKey.push(result.fID)
            }
            for (let item = 0; item < selectedRows.length; item += 1) {
              tempSelectKey.push(selectedRows[item].key)
            }
            this.setState({selectKey:tempSelectKey})
            }
        }
           else{ 
          let deletekeyList = []
          let tempSelectKey = []
          if (result.isFather === true) {
            if(record.children !==undefined && record.children !== null){
              for (let item = 0; item < record.children.length; item += 1) {
                deletekeyList.push(record.children[item].key)
              }
              for (let item = 0; item < selectedRows.length; item += 1) {
               for(let cItem = 0;cItem < deletekeyList.length; cItem += 1){
                 if(selectedRows[item].key === deletekeyList[cItem]){
                  selectedRows.splice(item,1) 
                 }
               }
              }
             
              for (let item = 0; item < selectedRows.length; item += 1) {
                tempSelectKey.push(selectedRows[item].key)
              }
              this.setState({selectKey:tempSelectKey})
            }
             else{
              for (let item = 0; item < selectedRows.length; item += 1) {
                tempSelectKey.push(selectedRows[item].key)
              }
              this.setState({selectKey:tempSelectKey})
            }
          }
          else{
            for (let item = 0; item < selectedRows.length; item += 1) {
              console.log(selectedRows[item].key,result.fID)
              if(selectedRows[item].key === result.fID){
                selectedRows.splice(item,1) 
              }
            }
             for (let item = 0; item < selectedRows.length; item += 1) {
              tempSelectKey.push(selectedRows[item].key)
            }
            this.setState({selectKey:tempSelectKey})

          }
        }

      }
    };

思路：

代码中
onSelectAll： 为全选按钮，点击全选不需要做判断，直接把所有的选择行赋值上。
onSelect：1，方法中我们现用selected 判断 这次点击事件为取消选择还是选中，true为选中，取消为false
2，在取消/选中的方法中，我们分成点击的选项为父数据还是子数据，
3，点击子选项：
A：选中：如果其他子的都存在之前的list之中 那就把父选中
B：选中：如果其他子的不都存在 不做操作
C：反选：把父反选

最后

,当然不要忘记把标签加上，除非你想白写=。=~