vue如何实现多级菜单

Vue 多级菜单实现方法

递归组件实现

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

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

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

动态路由配置

结合vue-router实现带权限的多级菜单，路由配置示例：

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

状态管理集成

使用Vuex或Pinia管理菜单状态，实现跨组件共享：

// store/modules/menu.js
export default {
  state: () => ({
    menuTree: []
  }),
  actions: {
    async fetchMenu() {
      const res = await api.getMenu()
      this.menuTree = res.data
    }
  }
}

第三方组件库

Element UI的el-menu组件实现示例：

<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" 
      :index="child.id"
    >
      {{ child.title }}
    </el-menu-item>
  </el-submenu>
</el-menu>

性能优化建议

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

<template>
  <RecycleScroller
    :items="flattenMenu"
    :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 {
  --indent-base: 15px;
  padding-left: calc(var(--level) * var(--indent-base));
}

实现多级菜单时，应根据具体需求选择合适的技术方案，考虑菜单数据量、交互复杂度以及权限控制等因素。