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>

これが仕組みです~