当前位置：首页 > VUE

vue 树形菜单实现

2026-02-20 00:10:20VUE

Vue 树形菜单实现方法

使用递归组件实现

递归组件是Vue中实现树形结构的核心方法。通过组件调用自身实现无限层级嵌套。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.label }}
      <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>

数据结构设计

树形菜单通常需要特定的数据结构支持，常见格式如下：

const treeData = [
  {
    id: 1,
    label: '一级菜单',
    children: [
      {
        id: 2,
        label: '二级菜单',
        children: []
      }
    ]
  }
]

添加交互功能

为树形菜单添加展开/折叠功能：

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

<script>
export default {
  name: 'TreeMenu',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(item) {
      if (item.children) {
        this.$set(item, 'expanded', !item.expanded)
      }
    }
  }
}
</script>

使用第三方库

对于复杂需求，可以考虑使用成熟的第三方组件库：

vue 树形菜单实现

Element UI 的 el-tree 组件

<el-tree :data="treeData" :props="defaultProps"></el-tree>

Vuetify 的 v-treeview 组件

<v-treeview :items="treeData"></v-treeview>

Ant Design Vue 的 a-tree 组件
```
<a-tree :treeData="treeData"></a-tree>
```

性能优化建议

对于大型树形结构，建议实现虚拟滚动或懒加载：

// 懒加载示例
{
  label: '懒加载节点',
  lazy: true,
  load: (node, resolve) => {
    // 异步获取数据
    fetchData().then(children => {
      resolve(children)
    })
  }
}

样式定制

通过CSS可以自定义树形菜单外观：

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

li {
  margin: 5px 0;
  cursor: pointer;
}

li > span:hover {
  background-color: #f0f0f0;
}

事件处理

为树节点添加点击事件：

<span @click="handleNodeClick(item)">{{ item.label }}</span>

<script>
methods: {
  handleNodeClick(item) {
    console.log('节点被点击:', item)
    // 可以在这里触发自定义事件
    this.$emit('node-click', item)
  }
}
</script>