vue实现多个树状图

实现多个树状图的方法

在Vue中实现多个树状图，可以使用第三方库如element-ui的el-tree组件或自定义递归组件。以下是两种常见实现方式：

使用element-ui的el-tree组件

安装element-ui后，通过v-for循环生成多个树状结构：

<template>
  <div>
    <el-tree
      v-for="(treeData, index) in treeList"
      :key="index"
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeList: [
        {
          label: '树1',
          children: [
            { label: '节点1' },
            { label: '节点2' }
          ]
        },
        {
          label: '树2',
          children: [
            { label: '节点A' },
            { label: '节点B' }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

自定义递归组件实现

创建可复用的树组件，通过递归渲染子节点：

<!-- Tree.vue -->
<template>
  <ul>
    <li v-for="node in data" :key="node.id">
      {{ node.label }}
      <Tree v-if="node.children" :data="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    data: Array
  }
}
</script>

<!-- 使用多个树 -->
<template>
  <div>
    <Tree v-for="(tree, index) in trees" :key="index" :data="tree"/>
  </div>
</template>

<script>
import Tree from './Tree.vue'
export default {
  components: { Tree },
  data() {
    return {
      trees: [
        [
          { id: 1, label: '节点1', children: [
            { id: 2, label: '子节点1' }
          ]}
        ],
        [
          { id: 3, label: '节点A', children: [
            { id: 4, label: '子节点A' }
          ]}
        ]
      ]
    }
  }
}
</script>

动态加载多个树

对于需要异步加载数据的场景，可以结合API请求实现：

methods: {
  async loadTrees() {
    const responses = await Promise.all([
      fetch('/api/tree1'),
      fetch('/api/tree2')
    ])
    this.treeList = await Promise.all(responses.map(r => r.json()))
  }
},
created() {
  this.loadTrees()
}

样式隔离技巧

为多个树添加独立样式类名，避免样式冲突：

<el-tree
  v-for="(tree, index) in trees"
  :key="index"
  :class="`tree-${index}`"
  :data="tree"
/>

.tree-0 .el-tree-node__content {
  background-color: #f0f9eb;
}
.tree-1 .el-tree-node__content {
  background-color: #fdf6ec;
}

性能优化建议

大数据量情况下使用虚拟滚动：

<el-tree
  :data="largeData"
  :props="defaultProps"
  :height="400"
  virtual
/>

通过以上方法可以灵活实现Vue中的多个树状图展示，根据具体需求选择组件库或自定义实现方式。