解决Element-UI el-tree有关子、父节点选中问题

发表于 | 更新于 | 分类于 |   |   字数统计:279字   |   阅读时长:1分

问题1

在使用el-tree组件在获取完数据进行页面回显数据时，因为后端返回的数据中包含父节点的关系，但是子节点并没有全部选中，就把不该选中的子节点也全部勾上了。

解决方案

  • isLeaf（判断节点是否为叶子节点）

  • getNode（获取tree中对应的节点）

  • setChecked （设置tree中对应的节点为选中状态）

1
2
3
4
5
6
7
8
9
let res = [1,11,23,25,28,37];
res.map((i, n) => {     
     //根据i获取tree中的节点     
     const node = that.$refs.menuListTree.getNode(i);     
     if (node && node.isLeaf) {          
         //设置某个节点的勾选状态          
         that.$refs.menuListTree.setChecked(node, true);      
     }
 });

注意，手动更新节点后无需在用回显数据赋值给data中绑定的值，否则会无效

问题2

在获取选择的节点数据时，子节点未全部选中时，getCheckedKeys中没有包含父节点id。

解决方案

  • halfCheckedKeys中为半选中的节点（具体可查看官方API）
1
2
3
4
5
getCheckedKeys() {  
	const childKeys = this.$refs.menuListTree.getCheckedKeys()
  const halfKeys = this.$refs.menuListTree.getHalfCheckedKeys()
  return [...childKeys, ...halfKeys]
},

文档

https://element.eleme.cn/#/zh-CN/component/tree

坚持技术分享，您的支持将鼓励我继续创作！