当前位置：首页 > VUE

vue 实现文档树结构

2026-01-22 00:20:26VUE

Vue 实现文档树结构

实现文档树结构通常需要递归组件和合适的数据结构。以下是具体实现方法：

数据结构设计

文档树通常采用嵌套结构，每个节点包含自身信息和子节点数组：

vue 实现文档树结构

const treeData = [
  {
    id: 1,
    name: '文档1',
    children: [
      {
        id: 2,
        name: '子文档1-1',
        children: []
      }
    ]
  }
]

递归组件实现

创建可递归调用的树组件：

vue 实现文档树结构

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <span @click="toggle(node)">{{ node.name }}</span>
      <tree-node 
        v-if="node.expanded && node.children.length"
        :nodes="node.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    nodes: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

样式优化

添加基础样式增强可视化效果：

ul {
  list-style-type: none;
  padding-left: 20px;
}
li {
  cursor: pointer;
  margin: 5px 0;
}
span:hover {
  color: #42b983;
}

动态加载

对于大型文档树，可实现懒加载：

async loadChildren(node) {
  if (!node.childrenLoaded) {
    const res = await api.getChildren(node.id)
    node.children = res.data
    node.childrenLoaded = true
  }
  node.expanded = !node.expanded
}

完整示例

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

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '根文档',
          children: []
        }
      ]
    }
  }
}
</script>