当前位置：首页 > VUE

vue实现树状图

2026-01-18 04:53:44VUE

实现树状图的基本思路

在Vue中实现树状图通常需要递归组件或第三方库的支持。树状图的核心是数据结构的递归渲染，每个节点可能包含子节点，形成层级关系。

使用递归组件实现

递归组件是指组件在其模板中调用自身，适用于树状结构的渲染。

数据结构示例：

const treeData = {
  id: 1,
  label: 'Root',
  children: [
    {
      id: 2,
      label: 'Child 1',
      children: [
        { id: 4, label: 'Grandchild 1' },
        { id: 5, label: 'Grandchild 2' }
      ]
    },
    {
      id: 3,
      label: 'Child 2'
    }
  ]
}

递归组件实现：

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        id: 1,
        label: 'Root',
        children: [
          {
            id: 2,
            label: 'Child 1',
            children: [
              { id: 4, label: 'Grandchild 1' },
              { id: 5, label: 'Grandchild 2' }
            ]
          },
          {
            id: 3,
            label: 'Child 2'
          }
        ]
      }
    }
  }
}
</script>

TreeNode.vue组件：

<template>
  <div>
    <div>{{ node.label }}</div>
    <div v-if="node.children" style="margin-left: 20px;">
      <tree-node 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child"
      ></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
}
</script>

使用第三方库实现

对于更复杂的树状图需求，可以使用专门的可视化库如D3.js或现成的Vue组件库。

使用vue-orgchart实现组织架构图： 安装vue-orgchart：

npm install vue-orgchart

示例代码：

<template>
  <orgchart :datasource="treeData"></orgchart>
</template>

<script>
import OrgChart from 'vue-orgchart'
import 'vue-orgchart/dist/style.min.css'

export default {
  components: { OrgChart },
  data() {
    return {
      treeData: {
        name: 'CEO',
        title: 'Chief Executive Officer',
        children: [
          {
            name: 'CTO',
            title: 'Chief Technology Officer',
            children: [
              { name: 'Dev Manager', title: 'Development Manager' },
              { name: 'QA Manager', title: 'Quality Assurance Manager' }
            ]
          },
          {
            name: 'CFO',
            title: 'Chief Financial Officer'
          }
        ]
      }
    }
  }
}
</script>

添加交互功能

树状图通常需要展开/折叠功能，可以通过在数据结构中添加状态属性实现。

改进的递归组件：

<template>
  <div>
    <div @click="toggle">
      {{ node.label }}
      <span v-if="hasChildren">{{ isOpen ? '[-]' : '[+]' }}</span>
    </div>
    <div v-show="isOpen" v-if="hasChildren" style="margin-left: 20px;">
      <tree-node 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child"
      ></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: true
    }
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

样式优化

为树状图添加CSS样式可以提升视觉效果。

基本样式示例：

.tree-node {
  cursor: pointer;
  padding: 5px;
  border-left: 1px solid #ccc;
}

.tree-node:hover {
  background-color: #f5f5f5;
}

.tree-node span {
  color: #666;
  font-size: 12px;
}