vue3 动态加载el-icon图标

https://element-plus.org/zh-CN/component/icon.html

静态示例

<el-icon>
  <Menu/>
</el-icon>

动态示例

Menu为图标名称,可替换,注意是字符串

<el-icon>
 <component :is="Menu" />
</el-icon>

在菜单列表中使用,渲染出每个菜单不同的图标

 <el-menu :default-active="activeMenu" class="sidebar">
    <el-sub-menu v-for="(item, index) in menus" :index="item.name" :key="index">
      <template #title>
        <el-icon>
          <component :is="item.icon" />
        </el-icon>
        <span>{{ item.name }}</span>
      </template>
      <template v-for="subItem in item.children">
        <el-menu-item :index="subItem.path" :key="index" @click="menuSelect">{{
          subItem.meta.title
        }}</el-menu-item>
      </template>
    </el-sub-menu>
 </el-menu>
posted @ 2024-02-06 13:53  槑孒  阅读(1610)  评论(0)    收藏  举报