el-tree 实现折叠全部和全部功能

概述

在使用 el-tree 组件时，有时需要实现“折叠全部”和“展开全部”的功能。本文将介绍如何通过 Vue 和 Element UI 实现这一功能。

示例代码

HTML + Vue 代码

vue

<template>
  <div>
    <el-switch
      v-model="switchValue"
      @change="switchChange"
      active-color="#13ce66"
      inactive-color="#ff4949"
    >
    </el-switch>
    <el-tree
      ref="treeRef"
      :props="props"
      :data="treeData"
      node-key="id"
      show-checkbox
      @check-change="handleCheckChange"
      :default-expand-all="isExpand"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      switchValue: false,
      isExpand: false,
      props: {
        label: 'label',
        children: 'children'
      },
      treeData: [
        // 树形数据结构示例
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        // 更多树节点...
      ]
    };
  },
  methods: {
    switchChange() {
      this.isExpand = !this.isExpand;
      this.$nextTick(() => {
        this.updateTreeExpansion();
      });
    },
    updateTreeExpansion() {
      const treeList = this.treeData;
      for (let i = 0; i < treeList.length; i++) {
        this.expandNode(treeList[i]);
      }
    },
    expandNode(node) {
      if (this.$refs.treeRef.store.nodesMap[node.id]) {
        this.$refs.treeRef.store.nodesMap[node.id].expanded = this.isExpand;
      }
      if (node.children && node.children.length > 0) {
        node.children.forEach(child => this.expandNode(child));
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      // 处理节点选中状态变化的逻辑
    }
  }
};
</script>

关键点说明

开关组件 (el-switch)：
- 使用 v-model 绑定 switchValue，并通过 @change 事件触发 switchChange 方法。
树组件 (el-tree)：
- 使用 ref="treeRef" 获取树组件实例。
- 使用 :default-expand-all="isExpand" 控制初始展开状态。
方法 (switchChange)：
- 切换 isExpand 状态，并调用 updateTreeExpansion 方法更新所有节点的展开状态。
递归更新节点 (expandNode)：
- 遍历树形结构，递归设置每个节点的 expanded 属性为当前的 isExpand 状态。

注意事项

异步更新：使用 this.$nextTick 确保 DOM 更新后再执行后续操作，以避免同步问题。
性能优化：对于大型树结构，考虑分页或懒加载以提高性能。
样式调整：根据实际需求调整 el-switch 的颜色和其他样式属性。