vue 实现多级菜单

实现多级菜单的基本思路

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

递归组件实现方式

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

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

2. 创建递归组件
   组件通过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>

动态渲染实现方式

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

   

   <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>

2. 添加交互逻辑
   通过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>

样式与功能优化

1. 添加缩进效果
   通过CSS控制层级缩进：

   

   .menu-item { padding-left: 20px; }

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

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

3. 状态管理
   复杂场景可使用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>

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