注意：这篇文章适用于后台返回的树结构比较多的情况下，如果数据比较少的情况下，可以参考我的上一篇文章，操作起来比较简单
我们在实际操作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