【antd】Tree組件子節點不完全勾選獲取父節點的值

注意：這篇文章適用於後臺返回的樹結構比較多的情況下，如果數據比較少的情況下，可以參考我的上一篇文章，操作起來比較簡單

我們在實際操作tree組件和後臺交互的時候一般都是需要將父節點傳過去，如圖：點擊原子零件和零件加工的時候需要把產品服務的id給後臺傳過去

在實現之前，需要給大家畫出來antd中標出來的相關屬性（敲黑板！！）

onCheck勾選方法，其中第二個參數是個事件對象，什麼意思捏？打印出來就說是如下：

e裏面有很多方法和屬性，其中包含了一個叫做halfCheckedKeys的數組，這個數組就是不完全勾選中tree的子節點的情況下的父節點，所以我們就這樣在勾選的時候就獲取到了父節點，然後通過拼接的形式傳給後臺就可以了～

onCheck = (checkedKeys,e) => {
    console.log('checkedKeys', checkedKeys, "e",e,);
    //注意：halfCheckedKeys 是沒有全部勾選狀態下的父節點
    let concatTreeData =  checkedKeys.concat(e.halfCheckedKeys)
    this.setState({ 
      checkedKeys: concatTreeData
    })
  }

--------------------------------------------------------------技術分割線(高階)---------------------------------------------------
但是，（又敲黑板！！！）我們給後臺傳過去了父節點，如果有反顯的情況下(如：修改，查看功能)，一旦有父節點，子節點又將會全部勾選！！這種情況下又該怎麼辦呢？

思路如下：
1.循環遍歷出最深層子節點，存放在一個數組中
2.將後臺返回的含有父節點的數組和第一步驟遍歷的數組做比較
3.如果有相同值，將相同值取出來，push到一個新數組中
4.利用這個新的重組的數組給Tree組件selected賦值

 let test = []   //test存放所有子節點的數組
//第一步驟：子節點放在一個數組中
 requestList = (data)=> {
    data && data.map(item=>{
       if(item.nodes && item.nodes.length>0){
          requestList(item.nodes)
       }else{
        test.push(item.menuId)
       }
       return null
     })
     return test
   }

//第2，3步驟的方法
uniqueTree =(uniqueArr,Arr)=> {
  let uniqueChild = []
  for(var i in Arr){
    for(var k in uniqueArr){
    if(uniqueArr[k] === Arr[i]){
        uniqueChild.push(uniqueArr[k])
    }
   }
  }
  return uniqueChild
}
//調用第2，3步驟的方法
 getRoleInfo = () => {
        get_user_info({ id: Id }).then(res => {
          let data = res.data.responseData;
          let uniqueChild = this.uniqueTree(data.menuIds,test)
          this.setState({
            childNodes: uniqueChild
            })
        });
      };

<Tree
   checkable = {checkable}
   onCheck={this.onCheck}
   checkedKeys={this.state.childNodes}
>
   {this.renderList(treeData,treekey)}
 </Tree>

這就OK了～