vue 实现多级菜单

Vue 实现多级菜单的方法

递归组件实现

递归组件是处理多级菜单的常见方式，通过组件调用自身实现无限层级嵌套。

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

<script>
export default {
  name: 'MultiLevelMenu',
  props: {
    menuData: {
      type: Array,
      required: true
    }
  }
}
</script>

动态组件实现

通过动态组件和路由配置实现多级菜单，适合与Vue Router结合使用。

<template>
  <div>
    <div v-for="item in menu" :key="item.path">
      <router-link v-if="!item.children" :to="item.path">
        {{ item.meta.title }}
      </router-link>
      <el-submenu v-else :index="item.path">
        <template #title>{{ item.meta.title }}</template>
        <menu-item :menu="item.children" />
      </el-submenu>
    </div>
  </div>
</template>

使用UI框架

Element UI或Ant Design Vue等框架提供了现成的多级菜单组件。

<template>
  <el-menu :default-active="activeIndex">
    <template v-for="item in menuData">
      <el-submenu 
        v-if="item.children" 
        :key="item.id" 
        :index="item.id.toString()"
      >
        <template #title>{{ item.name }}</template>
        <el-menu-item 
          v-for="child in item.children" 
          :key="child.id" 
          :index="child.id.toString()"
        >
          {{ child.name }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :key="item.id" :index="item.id.toString()">
        {{ item.name }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

状态管理

对于复杂的多级菜单，建议使用Vuex或Pinia管理菜单状态。

// store/modules/menu.js
export default {
  state: {
    menuTree: []
  },
  mutations: {
    setMenu(state, payload) {
      state.menuTree = payload
    }
  }
}

性能优化

大型多级菜单应考虑虚拟滚动或懒加载优化性能。

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

样式处理

多级菜单通常需要缩进样式表示层级关系。

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

路由集成

与Vue Router集成时，可通过路由配置生成菜单。

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { title: 'Dashboard' },
    children: [
      {
        path: 'analytics',
        component: Analytics,
        meta: { title: 'Analytics' }
      }
    ]
  }
]