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

Question

如何在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>

效果值这样的：

但是我在使用时，由于菜单信息是后端返回的，而且每个图标都不一样，所以就不能写死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>

有知道怎么解决的小伙伴吗

Answer 1

<el-icon v-html="menu.icon"></el-icon>

写法改下，试试这样

<el-icon>
  <component :is="menu.icon" />
</el-icon>
<script>
  data() {
    return {
        memu: {
            name: '菜单一',
            icon: 'location'
         }
    }
  }
</script>