Element-plus使用中遇到的问题与解决方案

动态渲染icon

Element-plus中的icon需要单独安装
Icon 图标 | Element Plus

<template><div class="page"><div class="h-menu"><div class="show-menu" @click="isCollapseHandle"><el-icon v-if="isCollapse"><Expand /></el-icon><el-icon v-else><Fold /></el-icon></div><el-menu default-active="1" :collapse="isCollapse" :router="true"><el-menu-item v-for="item in menuList" :key="item.id" :index="item.path"><el-icon><component :is="item.icon"></component></el-icon><template #title>{{ item.name }}</template></el-menu-item></el-menu></div><main><RouterView /></main></div>
</template><script>
export default {data() {return {isCollapse: true,menuList: [{id: '1',name: 'menu-1',path: '/',icon: 'Files'},{id: '2',name: 'menu-2',path: 'test_path',icon: 'User'},{id: '3',name: 'menu-3',path: 'test_path',icon: 'SwitchButton'}]}}
}
</script><style lang="less" scoped></style>