wisdomisitezwfront-web/src/layouts/components/Menu/SubMenu.vue

<template>
	<template v-for="subItem in menuList" :key="subItem.path">
		<el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
			<template #title>
				<!-- <img :src="require(`@/assets/images/leftTab/${subItem.meta.icon}`)" /> -->
				<img :src="`${imgUrl + subItem.meta.icon}`" />
				<!-- <img :src="`${subItem.meta.checkIcon}`" /> -->
				<!-- <component :is="subItem.meta.icon"></component> -->

				<span>{{ subItem.meta.title }}</span>
			</template>
			<SubMenu :menuList="subItem.children" />
		</el-sub-menu>
		<el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
			<!-- <img :src="`${subItem.meta.icon}`" /> -->
			<img :src="`${imgUrl + subItem.meta.icon}`" />
			<!-- <img :src="`${subItem.meta.checkIcon}`"  /> -->
			<template #title>
				<span>{{ subItem.meta.title }}</span>
			</template>
		</el-menu-item>
	</template>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

defineProps<{ menuList: Menu.MenuOptions[] }>();

const router = useRouter();
const imgUrl = "/src/assets/images/leftTab/";
const handleClickMenu = (subItem: Menu.MenuOptions) => {
	if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
	router.push(subItem.path);
};
</script>