vue怎样实现多级菜单

Vue 实现多级菜单的方法

递归组件实现

使用递归组件处理无限层级菜单结构，适合动态或未知深度的菜单数据。

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

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

数据结构示例：

menuData: [
  {
    id: 1,
    name: '一级菜单',
    children: [
      {
        id: 2,
        name: '二级菜单',
        children: [...] 
      }
    ]
  }
]

动态组件实现

通过v-for嵌套循环实现固定层级菜单，适合已知最大层级的情况。

<template>
  <div v-for="level1 in menuData" :key="level1.id">
    <div>{{ level1.name }}</div>
    <div v-for="level2 in level1.children" :key="level2.id">
      <div>{{ level2.name }}</div>
      <!-- 更多层级... -->
    </div>
  </div>
</template>

状态管理集成

结合Vuex或Pinia管理菜单展开/折叠状态：

// store示例
state: {
  expandedMenus: []
},
mutations: {
  toggleMenu(state, menuId) {
    const index = state.expandedMenus.indexOf(menuId)
    if (index > -1) {
      state.expandedMenus.splice(index, 1)
    } else {
      state.expandedMenus.push(menuId)
    }
  }
}

UI库集成

使用Element UI等现成方案快速实现：

<el-menu :default-openeds="['1']">
  <el-submenu index="1">
    <template #title>一级菜单</template>
    <el-submenu index="1-1">
      <template #title>二级菜单</template>
      <el-menu-item index="1-1-1">三级菜单</el-menu-item>
    </el-submenu>
  </el-submenu>
</el-menu>

路由集成方案

将菜单与vue-router结合实现导航功能：

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child,
        children: [...] 
      }
    ]
  }
]

性能优化建议

对于大型菜单数据，可采用虚拟滚动技术：

<template>
  <RecycleScroller
    :items="flattenedMenu"
    :item-size="50"
    key-field="id">
    <template #default="{ item }">
      <div :style="{ paddingLeft: `${item.level * 20}px` }">
        {{ item.name }}
      </div>
    </template>
  </RecycleScroller>
</template>

样式处理技巧

使用CSS变量控制层级缩进：

.menu-item {
  padding-left: calc(var(--level) * 1rem);
}

在组件中动态绑定：

<div 
  class="menu-item"
  :style="{ '--level': item.level }">
</div>

无障碍支持

确保菜单符合WAI-ARIA标准：

<div role="menu">
  <div 
    v-for="item in menuData"
    role="menuitem"
    :aria-expanded="isExpanded(item.id)">
  </div>
</div>