当前位置：首页 > VUE

vue tree 实现思路

2026-01-18 11:09:39VUE

Vue Tree 组件实现思路

数据结构设计

树形组件的数据通常采用嵌套结构，每个节点包含 label、children 等属性。例如：

const treeData = [
  {
    label: 'Node 1',
    children: [
      { label: 'Node 1.1' },
      { label: 'Node 1.2' }
    ]
  }
]

递归组件实现

通过 Vue 的递归组件特性渲染树形结构。组件内部调用自身实现子节点渲染：

<template>
  <ul>
    <li v-for="node in data" :key="node.label">
      {{ node.label }}
      <tree-node v-if="node.children" :data="node.children"/>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'TreeNode',
  props: ['data']
}
</script>

展开/折叠功能

通过 v-show 或 v-if 控制子节点显示状态，配合点击事件切换：

<li v-for="node in data" :key="node.label">
  <span @click="toggleExpand(node)">{{ node.expanded ? '-' : '+' }}</span>
  {{ node.label }}
  <tree-node v-show="node.expanded" :data="node.children"/>
</li>

节点选择功能

添加复选框或单选框实现节点选择，通过 v-model 绑定选中状态：

<li v-for="node in data" :key="node.label">
  <input type="checkbox" v-model="node.checked">
  {{ node.label }}
</li>

动态加载子节点

通过异步请求实现懒加载，点击节点时触发数据获取：

methods: {
  loadChildren(node) {
    if (!node.children) {
      fetchChildren(node.id).then(children => {
        node.children = children
      })
    }
  }
}

样式优化

使用 CSS 控制缩进和连线效果，增强视觉层次：

vue tree 实现思路

ul {
  padding-left: 20px;
}
li {
  position: relative;
  list-style: none;
}
li:before {
  content: '';
  position: absolute;
  left: -15px;
  top: 0;
  border-left: 1px solid #ccc;
}