关于Element Plus 图标 el-icon 遍历?
Element Plus 3.0 版本必须以结合 el-icon 使用,我在路由写成:
{
path: "/index",
name: "Index",
hidden: true,
component: () => import("../views/home/index.vue"),
meta: {
name: "首页",
icon: "<el-icon><User /></el-icon>",
},
},
在vue3遍历出来:
<template v-for="(item, index) in routers">
<el-sub-menu v-if="!item.hidden" :key="item.id" :index="index">
<template #title>
<div v-html:"item.meta.icon"></div>
<span>{{ item.meta.name }}</span>
</template>
</el-sub-menu>
</template>
问题是,渲染出来<el-icon>外面包了个<DIV> 显示不出来图标,只能去掉DIV
官方这样写不会出问题:<el-icon><xxxx /></el-icon>
如何在没DIV情况下可以渲染出来? 有啥办法么?
<template v-for="(item, index) in routers">
<el-sub-menu v-if="!item.hidden" :key="item.id" :index="index">
<template #title>
<el-icon> 这里遍历出来 </el-icon>
<span>{{ item.meta.name }}</span>
</template>
</el-sub-menu>
</template>
回复
1个回答
test
2024-07-08
{
path: "/index",
name: "Index",
hidden: true,
component: () => import("../views/home/index.vue"),
meta: {
name: "首页",
icon: "User", //这里直接用icon name
},
},
<template v-for="(item, index) in routers">
<el-sub-menu v-if="!item.hidden" :key="item.id" :index="index">
<template #title>
<component :is="item.meta.icon"> //这里有component
<span>{{ item.meta.name }}</span>
</template>
</el-sub-menu>
</template>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容