antd 4.8.2 父组件怎么获取子组件表单的值_【antd】Tree组件子节点不完全勾选获取父节点的值...

ac88f1d462d7e85ce7b1994c4e4d7f93.png

注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单

我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点击原子零件和零件加工的时候需要把产品服务的id给后台传过去

e0abe7e9a64e6b3466951bab24a525c8.png

在实现之前,需要给大家画出来antd中标出来的相关属性(敲黑板!!)

76bb07e3cae16f2a3781739880eacf8e.png

onCheck勾选方法,其中第二个参数是个事件对象,什么意思捏?打印出来就说是如下:

08011824aeeceb4283811cb443621121.png

e里面有很多方法和属性,其中包含了一个叫做halfCheckedKeys的数组,这个数组就是不完全勾选中tree的子节点的情况下的父节点,所以我们就这样在勾选的时候就获取到了父节点,然后通过拼接的形式传给后台就可以了~

onCheck 

--------------------------技术分割线(高阶)---------------------------------------------

但是,(又敲黑板!!!)我们给后台传过去了父节点,如果有反显的情况下(如:修改,查看功能),一旦有父节点,子节点又将会全部勾选!!这种情况下又该怎么办呢?

思路如下:
1.循环遍历出最深层子节点,存放在一个数组中
2.将后台返回的含有父节点的数组和第一步骤遍历的数组做比较
3.如果有相同值,将相同值取出来,push到一个新数组中
4.利用这个新的重组的数组给Tree组件selected赋值

代码如下:

let 

这就OK了~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值