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>
这样就实现啦~