<template>
|
<div>
|
<!-- 遍历菜单列表 -->
|
<template>
|
<div v-for="(item, index) in menuList" :key="index">
|
<!-- 有子集 → 渲染子菜单（el-submenu） -->
|
<el-submenu v-if="item.children && item.children.length > 0" :index="item.index">
|
<template slot="title">
|
<!-- 显示图标（如果有） -->
|
<i :class="item.icon" v-if="item.icon"></i>
|
<span>{{ item.label }}</span>
|
</template>
|
<!-- 递归渲染子菜单（自调用组件） -->
|
<menu-item-recursive :menu-list="item.children"></menu-item-recursive>
|
</el-submenu>
|
|
<!-- 无子集 → 渲染菜单项（el-menu-item） -->
|
<el-menu-item v-else :index="item.index">
|
<i :class="item.icon" v-if="item.icon"></i>
|
<span>{{ item.label }}</span>
|
</el-menu-item>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'MenuItemRecursive', // 递归组件必须指定name
|
props: {
|
// 接收父组件传入的菜单列表
|
menuList: {
|
type: Array,
|
required: true,
|
default: () => []
|
}
|
}
|
}
|
</script>
|
