vue实现多个树状图

Vue 实现多个树状图的方法

使用第三方组件库（如 Element UI）

Element UI 提供了 el-tree 组件，可以快速实现树状图。通过配置 data 和 props 属性，可以展示多个树状结构。

<template>
  <div>
    <el-tree :data="treeData1" :props="defaultProps"></el-tree>
    <el-tree :data="treeData2" :props="defaultProps"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData1: [
        {
          label: '一级节点1',
          children: [
            { label: '二级节点1' },
            { label: '二级节点2' }
          ]
        }
      ],
      treeData2: [
        {
          label: '一级节点A',
          children: [
            { label: '二级节点A' },
            { label: '二级节点B' }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

自定义递归组件

如果需要更灵活的树状图，可以自定义递归组件。通过递归调用子组件实现多层嵌套。

<template>
  <div>
    <tree-node :node="treeData1"></tree-node>
    <tree-node :node="treeData2"></tree-node>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  components: { TreeNode },
  data() {
    return {
      treeData1: {
        name: '根节点1',
        children: [
          { name: '子节点1' },
          { name: '子节点2' }
        ]
      },
      treeData2: {
        name: '根节点A',
        children: [
          { name: '子节点A' },
          { name: '子节点B' }
        ]
      }
    };
  }
};
</script>

在 TreeNode.vue 中：

<template>
  <div>
    <div>{{ node.name }}</div>
    <tree-node
      v-for="child in node.children"
      :key="child.name"
      :node="child"
    ></tree-node>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node']
};
</script>

动态加载数据

对于数据量较大的树状图，可以使用动态加载方式。通过监听节点展开事件加载子节点数据。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :load="loadNode"
    lazy
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        resolve([{ label: '根节点' }]);
      } else {
        setTimeout(() => {
          resolve([
            { label: '子节点1', leaf: true },
            { label: '子节点2', leaf: true }
          ]);
        }, 500);
      }
    }
  }
};
</script>

多树联动

如果需要多个树状图之间联动，可以通过共享状态或事件总线实现交互。

<template>
  <div>
    <el-tree
      :data="treeData1"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
    <el-tree
      :data="treeData2"
      :props="defaultProps"
      :highlight-current="true"
      ref="tree2"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData1: [/* 数据1 */],
      treeData2: [/* 数据2 */],
      defaultProps: { children: 'children', label: 'label' }
    };
  },
  methods: {
    handleNodeClick(data) {
      this.$refs.tree2.setCurrentKey(data.label);
    }
  }
};
</script>

注意事项

• 确保树状图的数据结构一致，避免渲染错误。
• 动态加载时注意性能优化，避免频繁请求数据。
• 自定义组件时，递归深度不宜过深，可能导致栈溢出。