element ui 树动态展开,关闭。

3,738 阅读1分钟

设置default-expand-all 默认全部展开为false

设置data默认展开数组defaultExpandedKeys=[];

监听展开函数nodeExpandEvent

监听关闭函数nodeCollapseEvent

<el-tree
...

:default-expand-all="false"
:default-expanded-keys="defaultExpandedKeys"
@node-collapse="nodeCollapseEvent"
@node-expand="nodeExpandEvent"

...
></el-tree>

treeData为树数据

更新树结构数据是根节点(只有一个根节点),默认第一级展开。

if(this.treeData && this.treeData.length>0){
     this.defaultExpandedKeys.push(this.treeData[0].id);
}

展开当前节点数据push到默认展开数组defaultExpandedKeys。 关闭splice删除当前节点数据。

nodeExpandEvent(data, node, ele) {
  this.$set(ele, "expanded", true);
  if (node.expanded) {
    this.defaultExpandedKeys.push(data.id);
    this.defaultExpandedKeys = Array.from(new Set(this.defaultExpandedKeys));
  }
},
 nodeCollapseEvent(data, node, ele) {
   if (this.defaultExpandedKeys.length > 0) {
        for (var i = 0; i < this.defaultExpandedKeys.length; i++) {
          if (this.defaultExpandedKeys[i] == data.id) {
            this.defaultExpandedKeys.splice(i, 1);
            this.$set(ele, "expanded", false);
          }
        }
      }
 }