当前位置：首页 > VUE

vue实现多级子菜单

2026-01-21 01:41:06VUE

实现多级子菜单的核心思路

在Vue中实现多级子菜单通常需要递归组件或动态渲染嵌套数据结构。关键在于通过组件递归或v-for嵌套处理层级关系，同时结合CSS控制展开/折叠状态。

递归组件实现方案

1. 定义菜单数据结构 数据结构应包含层级关系，例如：

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

2. 创建递归组件

<template>
  <ul>
    <li v-for="item in items" :key="item.title">
      <span @click="toggle(item)">{{ item.title }}</span>
      <MenuTree 
        v-if="item.children && item.expanded" 
        :items="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuTree',
  props: ['items'],
  methods: {
    toggle(item) {
      item.expanded = !item.expanded;
    }
  }
}
</script>

3. 样式控制 通过CSS控制缩进和动画效果：

vue实现多级子菜单

ul {
  padding-left: 1em;
  transition: all 0.3s;
}

动态渲染方案（非递归）

1. 使用计算属性扁平化层级

computed: {
  flattenedItems() {
    const flatten = (items, level = 0) => {
      return items.flatMap(item => [
        { ...item, level },
        ...(item.children ? flatten(item.children, level + 1) : [])
      ]);
    };
    return flatten(this.menuItems);
  }
}

2. 模板渲染

vue实现多级子菜单

<div v-for="item in flattenedItems" 
     :style="{ paddingLeft: `${item.level * 20}px` }">
  {{ item.title }}
</div>

关键优化点

状态管理

使用Vuex或provide/inject管理展开状态
通过expanded字段控制子菜单显隐

性能考虑

深层嵌套时使用v-show替代v-if
对静态菜单使用<keep-alive>

交互增强

添加旋转图标表示展开状态
通过transition组件实现平滑动画

完整示例代码结构

// 主组件
<template>
  <MenuTree :items="menuItems" />
</template>

// 递归组件
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <div @click="toggle(item)">
        <span>{{ item.title }}</span>
        <Icon v-if="item.children" :rotation="item.expanded ? 90 : 0"/>
      </div>
      <MenuTree 
        v-show="item.expanded"
        v-if="item.children"
        :items="item.children"
      />
    </li>
  </ul>
</template>

通过上述方案可实现无限级子菜单，实际应用中需根据具体需求调整数据结构和交互细节。