更新

src/layouts/components/menu-item.vue

@@ -0,0 +1,47 @@
+<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>