el-tree组件展开全部/折叠全部 & 展开部分/折叠部分

474 阅读1分钟

详细说明:

  1. 使用 this.$refs.treeRef.store._getAllNodes() 获取树的所有节点。
  2. 遍历所有节点,检查它们的 level 属性(这通常是树节点的深度)。
  3. 将某层的节点(level === 1 || level === 2 || level === 3)的 expanded 属性设置为 true,而将其他节点设置为 false

举几个例子:

<el-tree
...
node-key="id" //加入这个属性,否者代码无法生效
ref="treeRef"
...
</el-tree>

展开or折叠所有节点

expandAllNodes(expanded=true) {
    this.$refs.treeRef.store._getAllNodes().forEach(node => node.expanded = expanded);
},

展开第一层

const allNodes = this.$refs.treeRef.store._getAllNodes();
allNodes.forEach(node => {
  if (node.level === 1) { // 判断节点级别为1的条件
    node.expanded = true; // 展开第一层的节点
  } else {
    node.expanded = false; // 其他节点折叠
  }
});

展开一二层

const allNodes = this.$refs.treeRef.store._getAllNodes();
allNodes.forEach(node => {
  if (node.level === 1 || node.level === 2) { // 判断节点级别为1、2的条件
    node.expanded = true; // 展开第一二层的节点
  } else {
    node.expanded = false; // 其他节点折叠
  }
});