当前位置：首页 > VUE

vue 实现版本树

2026-03-30 08:57:52VUE

Vue 实现版本树的方法

使用 Vue 实现版本树可以通过递归组件或第三方库实现。以下是几种常见方法：

递归组件实现

递归组件适合处理嵌套的树形结构数据。通过组件调用自身实现版本树的渲染。

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

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

export default {
  components: { VersionNode },
  data() {
    return {
      treeData: {
        id: 1,
        name: 'v1.0',
        children: [
          {
            id: 2,
            name: 'v1.1',
            children: []
          }
        ]
      }
    }
  }
}
</script>

VersionNode 组件

<template>
  <div>
    <div @click="toggle">{{ node.name }}</div>
    <div v-show="isOpen" v-if="node.children && node.children.length">
      <version-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      ></version-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VersionNode',
  props: ['node'],
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

使用第三方库

对于更复杂的版本树需求，可以使用专门的树形组件库：

vue 实现版本树

Vue Tree Component
安装：npm install vue-tree-component
示例：

<template>
  <tree :data="treeData"></tree>
</template>
<script>
import { Tree } from 'vue-tree-component'
export default {
  components: { Tree },
  data() {
    return {
      treeData: [
        {
          text: 'v1.0',
          children: [
            { text: 'v1.1' }
          ]
        }
      ]
    }
  }
}
</script>

Element UI Tree
如果使用 Element UI，可以直接使用其 Tree 组件：

vue 实现版本树

<template>
  <el-tree :data="treeData"></el-tree>
</template>
<script>
export default {
  data() {
    return {
      treeData: [{
        label: 'v1.0',
        children: [{
          label: 'v1.1'
        }]
      }]
    }
  }
}
</script>

动态加载数据

对于大型版本树，可以实现动态加载：

<template>
  <version-node 
    :node="treeData"
    @load-children="loadChildren"
  ></version-node>
</template>

<script>
export default {
  methods: {
    loadChildren(node) {
      return axios.get(`/api/versions/${node.id}/children`)
        .then(res => {
          node.children = res.data
        })
    }
  }
}
</script>

样式优化

添加 CSS 美化版本树显示：

.version-tree {
  font-family: Arial;
  line-height: 2em;
}

.version-node {
  margin-left: 20px;
  cursor: pointer;
}

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

选择哪种方法取决于项目需求：