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实现菜单路由跳转，通过router-link绑定路由路径。

<router-link 
  v-for="item in menuList" 
  :to="item.path" 
  :key="item.id"
>
  {{ item.title }}
  <span v-if="item.children" class="arrow"></span>
</router-link>

状态管理

使用Vuex或Pinia管理菜单展开/折叠状态，确保多级菜单交互一致性。

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

样式处理

通过CSS实现菜单缩进和动画效果，增强视觉层次感。

.menu-item {
  padding-left: 20px;
  transition: all 0.3s;
}
.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.sub-menu.expanded {
  max-height: 500px;
}

性能优化

对于大型菜单数据，可采用虚拟滚动技术减少DOM节点数量。

<virtual-list 
  :size="40"
  :remain="8"
  :data="flattenMenuData"
>
  <template v-slot="{ item }">
    <menu-item :item="item"/>
  </template>
</virtual-list>

数据格式规范

推荐使用标准化的菜单数据结构，便于组件处理。

const menuData = [
  {
    id: 1,
    name: '一级菜单',
    icon: 'folder',
    children: [
      {
        id: 11,
        name: '二级菜单',
        path: '/submenu'
      }
    ]
  }
]

权限控制

结合角色权限过滤可见菜单项，实现动态菜单渲染。

computed: {
  filteredMenu() {
    return this.menuData.filter(item => 
      this.$auth.hasPermission(item.requiredRole)
    )
  }
}