vue实现多级菜单

实现多级菜单的核心思路

Vue中实现多级菜单通常通过递归组件或动态渲染实现，关键在于数据的嵌套结构和组件的自调用。以下是两种常见方案：

递归组件方案

数据结构示例

menuItems: [
  {
    title: '一级菜单',
    children: [
      {
        title: '二级菜单',
        children: [ /* 可继续嵌套 */ ]
      }
    ]
  }
]

递归组件实现

<template>
  <ul>
    <li v-for="item in items" :key="item.title">
      {{ item.title }}
      <menu-item 
        v-if="item.children && item.children.length" 
        :items="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuItem',
  props: ['items']
}
</script>

动态渲染方案

使用v-for与条件判断

<template>
  <div v-for="item in menuData" :key="item.id">
    <div @click="toggle(item)">
      {{ item.name }}
      <span v-if="item.children">{{ item.expanded ? '-' : '+' }}</span>
    </div>
    <div v-show="item.expanded" v-if="item.children">
      <menu-tree :menuData="item.children"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuTree',
  props: ['menuData'],
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

关键优化点

1. 性能优化

• 为每项添加唯一key
• 对大型数据集使用虚拟滚动

1. 交互增强

• 添加展开/折叠动画
• 支持路由跳转或事件触发
• 实现面包屑导航联动

1. 样式处理

• 使用CSS变量控制层级缩进
• 通过:class实现选中状态
• 响应式布局适配移动端

第三方库方案

1. Element UI
   使用el-menu组件配合el-submenu实现：

   <el-menu>
   <el-submenu v-for="item in menu" :key="item.id" :index="item.id">
    <template #title>{{ item.title }}</template>
    <el-menu-item v-for="child in item.children" :key="child.id">
      {{ child.title }}
    </el-menu-item>
   </el-submenu>
   </el-menu>

2. Ant Design Vue
   通过a-menu和a-sub-menu组件实现类似效果。

状态管理整合

当菜单需要与全局状态联动时：

// Vuex示例
state: {
  activeMenuPath: [] // 存储当前激活路径
},
mutations: {
  setActivePath(state, path) {
    state.activeMenuPath = path
  }
}

在组件中通过computed属性关联状态，实现菜单高亮与路由同步。