50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
<template v-for="menu in menuList" :key="menu.path">
|
|
<!-- 有子菜单 -->
|
|
<el-sub-menu v-if="hasChildren(menu) && !menu.meta?.hidden" :index="menu.path">
|
|
<template #title>
|
|
<el-icon v-if="menu.meta?.icon">
|
|
<component :is="menu.meta.icon" />
|
|
</el-icon>
|
|
<span>{{ menu.meta?.title }}</span>
|
|
</template>
|
|
<!-- 递归渲染子菜单 -->
|
|
<menu-item :menu-list="menu.children" :parent-path="menu.path" />
|
|
</el-sub-menu>
|
|
|
|
<!-- 无子菜单 -->
|
|
<el-menu-item v-else-if="!menu.meta?.hidden" :index="menu.path">
|
|
<el-icon v-if="menu.meta?.icon">
|
|
<component :is="menu.meta.icon" />
|
|
</el-icon>
|
|
<template #title>
|
|
<span>{{ menu.meta?.title }}</span>
|
|
</template>
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineOptions({
|
|
name: 'MenuItem',
|
|
})
|
|
|
|
defineProps({
|
|
menuList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
parentPath: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
// 判断是否有子菜单
|
|
const hasChildren = (menu) => {
|
|
return menu.children && menu.children.length > 0
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|