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