vue3 ts element-plus 左侧菜单栏

<script lang="tsx">
import { ElMenu, ElSubMenu, ElMenuItem } from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { DefineComponent } from 'vue';

export default defineComponent({
	name: 'MySubMenus',
	props: {
		item: {
			type: Object,
			required: true,
		},
	},
	setup(props) {
		const generateMenus = (data: MenuItemTree[] | null) => {
			return data?.map((menus: MenuItemTree) => {
				const icon = 'IEp' + menus.icon;
				if (menus.children) {
					console.log(icon);
					return (
						<ElSubMenu index={'/' + menus.path}>
							{{
								title: () => (
									<span>
										{renderIcon(menus.icon)}
										{menus.name}
									</span>
								),
								default: () => {
									return generateMenus(menus.children);
								},
							}}
						</ElSubMenu>
					);
				} else {
					return (
						<ElMenuItem index={'/' + menus.path}>
							{renderIcon(menus.icon)}
							<span>{menus.name}</span>
						</ElMenuItem>
					);
				}
			});
		};
		const renderIcon = (icon?: string) => {
			if (!icon) {
				return null;
			}
			const IconComp = (
				ElementPlusIconsVue as unknown as { [key: string]: DefineComponent }
			)[icon];
			return (
				<el-icon>
					<IconComp />
				</el-icon>
			);
		};
		const renderMenus = () => {
			const Menuslist = generateMenus(props.item as MenuItemTree[]);
			return (
				<ElMenu router default-active="2" class={'el-menu-vertical-demo'}>
					{Menuslist}
				</ElMenu>
			);
		};
		return () => renderMenus();
	},
});
</script>

solt 插槽tsx写法 vue3

• $使用\#title$

	<ElSubMenu index={'/' + menus.path}>
		<template #title>
			<span>{menus.name}</span>
		</template>
		{generateMenus(menus.children)}
	</ElSubMenu>

$编译都不通过$

 [vue/compiler-sfc] Unexpected token

• $使用v-solt:title$

<ElSubMenu index={'/' + menus.path}>
	<template v-solt:title>
		<span>{menus.name}</span>
	</template>
	{generateMenus(menus.children)}
</ElSubMenu>

$编译通过，但是没有渲染这个插槽内容$

• $正确的$

setup(props) {
	const generateMenus = (data: MenuItemTree[] | null) => {
		return data?.map((menus: MenuItemTree) => {
			if (menus.children) {
				return (
					<ElSubMenu index={'/' + menus.path}>
						{{
						title: () => <span>{menus.name}</span>,
						default: () => {
							return generateMenus(menus.children);
							},
						}}
					</ElSubMenu>
				);
			} else {
				return (
					<ElMenuItem index={'/' + menus.path}>
						<ElIcon></ElIcon>
						<span>{menus.name}</span>
					</ElMenuItem>
				);
	        }
    });
}

渲染图标

const renderIcon = (icon?: string) => {
			if (!icon) {
				return null;
			}
			const IconComp = (
				ElementPlusIconsVue as unknown as { [key: string]: DefineComponent }
			)[icon];
			return (
				<el-icon>
					<IconComp />
				</el-icon>
			);
		};