### 封装 `el
-menu` 组件以支持动态
多级菜单
为了实现在
Vue3 中
使用 Element Plus 的 `el
-menu` 组件来创建动态
多级菜单，可以通过自定义封装该组件并利用递归来处理任意层次的数据结构。具体方法如下：
#### 数据准备
首先准备好用于渲染
菜单的数据源。这些数据通常是从服务器获取或者静态配置好的
JSON 对象数组形式存在。
```javascript
const menuData = [
{
path: '/admin',
name: 'Admin',
children: [
{
path: '/index',
name: 'Index',
meta: { title: '首页', icon: 'HomeFilled' }
},
{
path: '/user',
name: 'User',
meta: { title: '用户', icon: 'UserFilled' },
children: [
{
path: '/roles',
name: 'Roles',
meta: { title: '角色管理', icon: 'Avatar' }
}
]
}
]
}
];
```
#### 创建递归函数
遍历节点
编写一个辅助函数 `_renderMenuItem(item)` 来迭代每一个
菜单项及其子项，并返回对应的 VNode 或者
JSX 片段表示法[^2]。
```typescript
function _renderMenuItem(item, index) {
const hasChildren = Array
.isArray(item
.children) && item
.children
.length > 0;
return (
<>
<el
-submenu v
-if="hasChildren" :index="`${item
.path}
-${index}`">
<template #title>
<i class={`icon
-${item
.meta
.icon}`} />
<span>{item
.meta
.title}</span>
</template>
{item
.children
.map((childItem, childIdx) => _renderMenuItem(childItem, childIdx))}
</el
-submenu>
<el
-menu
-item v
-else :index="item
.path">
<i class={`icon
-${item
.meta
.icon}`} />
<span slot="title">{item
.meta
.title}</span>
</el
-menu
-item>
</>
);
}
```
#### 定义模板部分
最后，在页面上定义好 `<el
-menu>` 根标签，并调用上述编写的递归函数完成整个树形结构的构建工作[^1]。
```html
<template>
<div id="app">
<!
-- 基础样式
-->
<el
-menu default
-active="/home" router mode="vertical">
{{ menuItems }}
</el
-menu>
</div>
</template>
<script setup lang="ts">
import { ref } from '
vue';
//
...其他导入语句
...
let menuItems = ref([]);
// 初始化时设置初始值
menuItems
.value = props
.menuData?
.map((item, idx) => _renderMenuItem(item, idx));
</script>
```
通过这种方式能够灵活应对不同深度级别的导航条目展示需求，同时也简化了开发过程中的复杂度。
扫一扫
6831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
