vue3动态渲染Element-plus带图标的菜单项

1、需求：

左侧的这个带图标的菜单项需要动态渲染出来。

2、思路：

如果不用渲染，直接写：

<el-menu-item index="1">
  <el-icon size="32">
    <House />
  </el-icon>
  <span>主页</span>
</el-menu-item>

可以看到，icon图标是以一个组件的形式进行渲染的。
那么用v-for进行列表渲染的时候，这个图标的组件怎么渲染出来，成了个难题。
直接用双花括号{ {}}肯定是不行的，直接会把标签搞成文本，
用v-html也不行，它只能渲染原生的HTML标签。

3、实现方法

html部分：

<el-menu-item :index="item.key" v-for="(item, index) in menuList" :key="index">
  <template #default>
    <el-icon size="32">
      <component :is="item.icon" />
    </el-icon>
    <span>{
    
    {
    
     item.name }}</span>
  </template>
</el-menu-item>

js部分：

<script setup>
import {
    
     ref } from "vue";
import {
    
     House, Clock, Document, FolderAdd } from "@element-plus/icons-vue";
let menuList = ref([
  {
    
    
    key: "1",
    name: "主页",
    icon: <House />,  //重点在这里。看到别人写的实现方法是icon:"House"，但是我尝试了无效。
    path: "/visit",
  },
  {
    
    
    key: "2",
    name: "历史记录",
    icon: <Clock />,
    path: "/visit",
  },
  {
    
    
    key: "3",
    name: "草稿",
    icon: <Document />,
    path: "/visit",
  },
  {
    
    
    key: "4",
    name: "自定义",
    icon: <FolderAdd />,
    path: "/visit",
  },
]);
</script>

这样就实现啦~