vue3 el-menu菜单递归循环创建
时间: 2025-01-07 12:12:30 浏览: 98
### Vue 3 中使用 `el-menu` 组件通过递归循环创建菜单
#### 实现思路
为了在 Vue 3 和 Element Plus 中实现动态菜单,可以采用递归组件的方式处理多级嵌套的数据结构。这种方法能够简化模板逻辑并提高代码可维护性。
#### 数据准备
假设有一个表示菜单树形结构的对象数组作为输入源:
```javascript
const menuData = [
{
index: '1',
title: '首页',
icon: 'home-filled'
},
{
index: '2',
title: '文档管理',
children: [
{index: '2-1', title: '文件上传'},
{index: '2-2', title: '文件下载'}
]
}
];
```
此数据模型支持无限层级的子节点扩展[^1]。
#### 渲染逻辑
定义一个名为 `<MenuTree>` 的自定义组件来负责渲染每一层菜单及其可能存在的子菜单。该组件接收两个属性:一个是当前级别的菜单列表 (`menus`);另一个是指定激活状态下的索引值(`activeIndex`)。
对于每一条记录而言:
- 如果它不包含任何子项,则直接呈现为普通的 `el-menu-item`.
- 若存在子集,则包裹于 `el-submenu` 内部,并再次调用相同的 `<MenuTree/>`, 将其传递给后者以继续构建更深层次的内容.
以下是完整的示例代码:
```html
<template>
<!-- MenuTree.vue -->
<div v-for="(item, idx) in menus" :key="idx">
<el-menu-item v-if="!item.children" :index="item.index">{{ item.title }}</el-menu-item>
<el-submenu v-else :index="item.index">
<template slot="title"><i :class="'el-icon-' + item.icon"></i>{{ item.title }}</template>
<MenuTree :menus="item.children"/>
</el-submenu>
</div>
</template>
<script setup lang="ts">
import { defineProps } from "vue";
defineProps({
menus: Array,
});
</script>
```
注意,在上述例子中,当遇到有孩子的项目时,会自动触发新一轮迭代过程直到遍历完整棵树状图为止[^3].
最后一步是在主应用里引入这个新组建并将之前提到过的 `menuData` 赋予它做参数传入:
```html
<!-- App.vue 或者其他页面组件 -->
<MenuTree :menus="menuData" />
```
这样就完成了一个基于 Vue 3 及 Element UI 的响应式侧边栏导航系统的搭建工作[^2].
阅读全文
相关推荐



















