注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单
我们在实际操作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})});};<Treecheckable = {checkable}onCheck={this.onCheck}checkedKeys={this.state.childNodes}
>{this.renderList(treeData,treekey)}</Tree>
这就OK了~