关于Element Plus 图标 el-icon 遍历?

作者站长头像
站长
· 阅读数 8

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个回答
avatar
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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容