el-tree控件获取当前被选中的节点,以及父节点(祖节点)

文章讲述了在使用ElementUI的el-tree组件时,如何处理初始设置的checkStrictly属性以控制父子节点的选择状态。作者提到在反显接口调用前后,需要动态调整checkStrictly值以避免全选所有子项的问题,并分享了根据特定场景切换checkStrictly的策略。
摘要由CSDN通过智能技术生成
                    <el-tree
						:data="treeList"
						:props="treeProps"
						show-checkbox
						node-key="id"
						:default-checked-keys="defkey"
						style="padding: 0 20px"
						ref="treeRef"
						@check="handleCheck"
						default-expand-all
						check-on-click-node
						:checkStrictly="checkStrictly"
					></el-tree>

初始设置checkStrictly为true,让父子不关联,因为我这里接口反显的时候会把父的信息也反显过来,关联了就会把父的所有子级全部勾选中

在调完反显接口后将checkStrictly设成false,让父子关联,然后再把数据赋给chooseList,chooseList为初始化当前选中的数据

		handleCheck(item, val) {
			console.log(val, "val.checkedNodes")
			this.chooseList = [...val.checkedNodes, ...val.halfCheckedNodes];
			console.log(this.chooseList, "this.chooseList")
		},

然后将全选的和半选的放进一个数组里,就能拿到实现我们要的, 获取当前被选中的节点,以及父节点(祖节点)了

 这里最大的问题就是反显的问题了,一开始我设置checkStrictly为false,然后在拿父祖的信息毫无

问题,以为轻松解决了,试了几遍就发现反显的时候因为返回了父的信息,所以会把所有的子项全

部选中,这个时候就要动态的处理下checkStrictly的值了

这个时候想到了看到的一篇文章里面说的

http://t.csdnimg.cn/o4VbG

在拿到后端传回的父子数据渲染页面时,我们希望不要关联。checkStrictly = true

页面渲染完成,和用户交互时,我们希望关联。checkStrictly = false

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值