2301_76244986 2023-02-10 14:38 采纳率: 33.3%
浏览 50
已结题

如何在Element-plus的el-menu使用动态图标

如何在Element-plus的el-menu使用动态图标

在项目中用到了Element-plus的Menu 菜单组件,官网中给菜单添加图标的代码是这样的:

<el-sub-menu index="1">
  <template #title>
    <el-icon><location /></el-icon>
     <spa>Navigator One</span>
  </template>
</el-sub-menu>

效果值这样的:

img

但是我在使用时,由于菜单信息是后端返回的,而且每个图标都不一样,所以就不能写死icon标签,后端返回的菜单信息:
[
  {
    name: '菜单一',
    icon: 'Location'
  },
  {}.....
]
试着使用v-html,但是没有效果
<el-sub-menu index="1">
  <template #title>
    <el-icon v-html="menu.icon"></el-icon>
     <span>{{menu.name}}</span>
  </template>
</el-sub-menu>

<script>
  data() {
    return {
        memu: {
            name: '菜单一',
            icon: '<location />'
         }
    }
  }
</script>

有知道怎么解决的小伙伴吗
  • 写回答

2条回答 默认 最新

  • 成茂峰 2023-02-10 15:38
    关注
    <el-icon v-html="menu.icon"></el-icon>
    

    写法改下,试试这样

    <el-icon>
      <component :is="menu.icon" />
    </el-icon>
    <script>
      data() {
        return {
            memu: {
                name: '菜单一',
                icon: 'location'
             }
        }
      }
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月18日
  • 已采纳回答 2月10日
  • 创建了问题 2月10日

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥15 寻找能匹配的液晶显示屏。
  • ¥30 微信小程序请求失败,网页能正常带锁访问