当前位置：首页 > VUE

vue 实现多级菜单

2026-01-18 01:36:50VUE

实现多级菜单的基本思路

在Vue中实现多级菜单通常需要递归组件或动态渲染嵌套数据结构。核心是通过组件递归调用自身，或利用v-for遍历嵌套的菜单数据。

递归组件实现方式

定义菜单数据结构
数据格式应包含children字段表示子菜单，例如：

const menuData = [
  {
    title: '一级菜单1',
    children: [
      { title: '二级菜单1-1' },
      { title: '二级菜单1-2', children: [...] }
    ]
  }
]

创建递归组件
组件通过name调用自身实现递归：

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

动态渲染实现方式

使用v-for嵌套
通过多层v-for直接渲染固定层级：

vue 实现多级菜单

<template>
  <div v-for="level1 in menuData">
    <div>{{ level1.title }}</div>
    <div v-for="level2 in level1.children">
      <div>{{ level2.title }}</div>
    </div>
  </div>
</template>

添加交互逻辑
通过v-show或v-if控制子菜单显隐，并绑定点击事件：

<template>
  <div @click="toggle(item)">
    {{ item.title }}
    <div v-show="item.expanded" v-for="child in item.children">
      {{ child.title }}
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    toggle(item) {
      item.expanded = !item.expanded
    }
  }
}
</script>

样式与功能优化

添加缩进效果
通过CSS控制层级缩进：
```
.menu-item { padding-left: 20px; }
```

集成路由
结合vue-router实现菜单跳转：

menuData: [
  { title: '首页', path: '/' },
  { title: '产品', children: [...] }
]

状态管理
复杂场景可使用Vuex或Pinia管理菜单展开状态。

完整示例代码

<template>
  <div class="menu">
    <MenuTree :data="menuData"/>
  </div>
</template>

<script>
import MenuTree from './MenuTree.vue'
export default {
  components: { MenuTree },
  data() {
    return {
      menuData: [
        {
          title: 'Dashboard',
          children: [
            { title: 'Analytics' },
            { title: 'Reports' }
          ]
        }
      ]
    }
  }
}
</script>

递归组件MenuTree.vue：

<template>
  <ul>
    <li v-for="item in data" :key="item.title">
      <div @click="toggle(item)">
        {{ item.title }}
        <span v-if="item.children">▶</span>
      </div>
      <MenuTree 
        v-if="item.children && item.expanded" 
        :data="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuTree',
  props: ['data'],
  methods: {
    toggle(item) {
      if (item.children) {
        item.expanded = !item.expanded
      }
    }
  }
}
</script>

通过以上方法可以灵活实现多级菜单，根据项目需求选择递归或动态渲染方案。