el-tree数据回显,解决子级部分选中,父级全选效果

在el-tree中回显数据有一个很明显的坑,只要回显的数据里有父级的id,不管当前父级下的子级是部分选中还是全选,父级的check效果都是全选。
预计效果图:
在这里插入图片描述
实际效果图:
在这里插入图片描述
我看了很多博主说用setChecked循环便利来勾选叶子节点,但我试了半天也没用,setTimeout,nextTick都试了,无效。所以干脆自己写。我还是用的setCheckedKeys来实现勾选的,逻辑很简单,arr是存储叶子节点的数组。利用getNode()获取当前节点,在后段返回给我的数据中循环判断当前节点是否叶子结点,是存入arr当中。在用setcheckedKey(arr)来回显数据,这样就可以实现父级半选的状态了。

const arr = []
res.data.forEach(f=>{
	if(!this.$refs.tree.getNode(f.permissionId).childNodes || !this.$refs.tree.getNode(f.permissionId).childNodes.length) {
       arr.push(f.permissionId)
     }
})
this.$refs.tree.setCheckedKeys(arr)
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值