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

2,798 阅读1分钟

在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)