注意：這篇文章適用於后台返回的樹結構比較多的情況下，如果數據比較少的情況下，可以參考我的上一篇文章，操作起來比較簡單
我們在實際操作tree組件和后台交互的時候一般都是需要將父節點傳過去，如圖：點擊原子零件和零件加工的時候需要把產品服務的id給后台傳過去
屏幕快照 2019-08-05 下午5.46.40.png
在實現之前，需要給大家畫出來antd中標出來的相關屬性(敲黑板！！)
WeChatf1fc404c8dd393ff058a631d87246c67.pngonCheck勾選方法，其中第二個參數是個事件對象，什么意思捏？打印出來就說是如下：
WeChat06b1c27746a78c88638e9b1461151d89.png
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.將每個不同頁面(或者說是不同ID對應的頁面)后台返回的含有父節點的數組和第一步驟遍歷出來的只包含子節點的test數組做比較
3.如果有相同值，將相同值取出來，push到一個新數組中
4.利用這個新的重組的數組給Tree組件selected賦值
let test = [] //test存放所有子節點的數組
//第一步驟：子節點放在一個數組中
componentDidMount() {
//這個接口是請求所有的父子節點的接口
get_menu_tree().then(res => {
const { responseData } = res.data
this.requestList(responseData) //將后台返回的所有父子節點的數組傳給下面的方法
})
this.getRoleInfo() // 修改請求頁面詳情的時候調用
}
//這個方法是篩選出來所有的子節點，存放在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
})
});
};
checkable = {checkable}
onCheck={this.onCheck}
checkedKeys={this.state.childNodes}
>
{this.renderList(treeData,treekey)}
這就OK了～
————————————————
版權聲明：本文為CSDN博主「福運金剛」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_32259417/article/details/112834287