当前位置：首页 > VUE

vue实现树形菜单

2026-02-18 23:47:01VUE

Vue 实现树形菜单的方法

递归组件实现树形结构

使用 Vue 的递归组件特性可以轻松实现树形菜单。递归组件是指组件在其模板中调用自身，适用于树形结构数据的渲染。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <tree-menu v-if="item.children" :treeData="item.children"></tree-menu>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

动态加载子节点

对于大型树形结构，可以使用动态加载方式，只在展开节点时加载其子节点数据。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <span @click="toggleChildren(item)">
        {{ item.name }}
        <span v-if="item.children && !item.expanded">+</span>
        <span v-if="item.children && item.expanded">-</span>
      </span>
      <tree-menu 
        v-if="item.expanded && item.children" 
        :treeData="item.children"
      ></tree-menu>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    treeData: Array
  },
  methods: {
    toggleChildren(item) {
      if (!item.children) {
        // 这里可以添加异步加载子节点的逻辑
        this.$set(item, 'children', [])
      }
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

使用第三方组件库

许多流行的 Vue UI 组件库都提供了现成的树形组件，可以快速集成：

Element UI 的 el-tree 组件：

<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>

Ant Design Vue 的 a-tree 组件：

<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
:tree-data="treeData"
@select="onSelect"
/>

自定义样式和交互

可以通过 CSS 和事件处理来自定义树形菜单的外观和行为：

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  cursor: pointer;
  padding: 5px;
}

li:hover {
  background-color: #f5f5f5;
}

数据格式处理

树形菜单通常需要特定的数据格式，可以使用计算属性或方法对原始数据进行转换：

computed: {
  normalizedTreeData() {
    return this.rawData.map(item => {
      return {
        id: item.id,
        name: item.label,
        children: item.subItems ? this.normalizeChildren(item.subItems) : null
      }
    })
  }
}

性能优化技巧

对于大型树形结构，可以采用虚拟滚动技术优化性能：

vue实现树形菜单

<virtual-list
  :size="30"
  :remain="10"
  :data="flattenedTreeData">
  <template v-slot="{ item }">
    <div :style="{ paddingLeft: `${item.level * 20}px` }">
      {{ item.name }}
    </div>
  </template>
</virtual-list>

以上方法提供了从简单到复杂的 Vue 树形菜单实现方案，可以根据项目需求选择合适的实现方式。