![ac88f1d462d7e85ce7b1994c4e4d7f93.png](https://i-blog.csdnimg.cn/blog_migrate/7831d7af4801100ce6f4494242853812.jpeg)
注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单
我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点击原子零件和零件加工的时候需要把产品服务的id给后台传过去
![e0abe7e9a64e6b3466951bab24a525c8.png](https://i-blog.csdnimg.cn/blog_migrate/2066b067dfcf36765ebd92cdfa756107.png)
在实现之前,需要给大家画出来antd中标出来的相关属性(敲黑板!!)
![76bb07e3cae16f2a3781739880eacf8e.png](https://i-blog.csdnimg.cn/blog_migrate/e15b6b08cb5e23d3e0513e87f2d06e76.jpeg)
onCheck勾选方法,其中第二个参数是个事件对象,什么意思捏?打印出来就说是如下:
![08011824aeeceb4283811cb443621121.png](https://i-blog.csdnimg.cn/blog_migrate/2db5ac7fd103e92764fae2857ee6c2fa.jpeg)
e里面有很多方法和属性,其中包含了一个叫做halfCheckedKeys的数组,这个数组就是不完全勾选中tree的子节点的情况下的父节点,所以我们就这样在勾选的时候就获取到了父节点,然后通过拼接的形式传给后台就可以了~
onCheck
--------------------------技术分割线(高阶)---------------------------------------------
但是,(又敲黑板!!!)我们给后台传过去了父节点,如果有反显的情况下(如:修改,查看功能),一旦有父节点,子节点又将会全部勾选!!这种情况下又该怎么办呢?
思路如下:
1.循环遍历出最深层子节点,存放在一个数组中
2.将后台返回的含有父节点的数组和第一步骤遍历的数组做比较
3.如果有相同值,将相同值取出来,push到一个新数组中
4.利用这个新的重组的数组给Tree组件selected赋值
代码如下:
let
这就OK了~