vue3使用Elementplus 动态显示菜单icon不生效

1.问题描述

菜单icon由后端提供,直接用的字符串返回,前端使用遍历显示,发现icon不会显示

javascript 复制代码
  {'id': 8, path:'/userManagement', 'authName': "用户管理", icon: 'User', rights:['view']},
javascript 复制代码
<el-menu-item :index="menu.path" v-for="menu in menuList" :key="menu.id">
            <el-icon v-if="menu.icon">
              <component :is="menu.icon"/>
            </el-icon>
            {{menu.authName}}
          </el-menu-item>

import {  DataAnalysis, Promotion, DocumentCopy,Management,Files, User, Stamp} from '@element-plus/icons-vue'

2.问题出现原因

后端提供的是字符串,那么在<component :is="menu.icon"/>处读取到的也是字符串,而<component>组件中要求是一个能渲染的组件,类似如下结构:

3.尝试解决一

想当然的,如果后端直接返回组件形式是不是就可以了。

尝试通过shallowRef(User)形式模拟后端返回的数据,发现还是显示不出来

javascript 复制代码
import { shallowRef } from 'vue'
import { User} from '@element-plus/icons-vue'

    {'id': 8, path:'/userManagement', 'authName': "用户管理", icon: shallowRef(User), rights:['view']},

数据结构如下:

使用<component :is="menu.icon._value"/>也不行

4.解决------使用组件映射文件

其实<component>里面只是要一个组件而已,后台返回的是字符串,将字符串对应到响应的Icon组件即可。

于是写一个映射文件:将后端返回的字符串key和前端icon组件进行映射即可

javascript 复制代码
import {  DataAnalysis, Promotion, DocumentCopy,Management,Files, User, Stamp} from '@element-plus/icons-vue'

export const iconMapping = {
  "dataAnalysis": DataAnalysis,
  "promotion": Promotion,
  "documentCopy": DocumentCopy,
  "management": Management,
  "files": Files,
  "user": User,
  "stamp": Stamp,
}
javascript 复制代码
const menuList = Object.freeze([
    {'id': 1, path:'/uploadSpec','authName': "上传spec", icon: 'dataAnalysis', children:[], rights:['view','add','edit','delete']},
    {'id': 2, path:'/showSpec', 'authName': "Spec预览", icon: 'dataAnalysis',children:[], rights:['view','add','edit','delete']},
    {'id': 3, path:'/generateTxt', 'authName': "生成测试数据", icon: 'dataAnalysis',children:[], rights:['view','add','edit','delete']},
    {'id': 4, path:'/generateCronjob', 'authName': "生成转码程序", icon: 'promotion',children:[], rights:['view','add','edit','delete']},
    {'id': 5, path:'/pdfCompare', 'authName': "PDF文档对比", icon: 'documentCopy',children:[], rights:['view','add','edit','delete']},
    {'id': 6, path:'/resourceUpdate', 'authName': "资源更新管理", icon: 'management',children:[], rights:['view','add','edit','delete']},
    {'id': 7, path:'/generateTestCase', 'authName': "自动生成ST/SIT案例", icon: 'files',children:[], rights:['view','add','edit','delete']},
    {'id': 8, path:'/userManagement', 'authName': "用户管理", icon:'user', rights:['view']},
    {'id': 9, path:'/roleManagement', 'authName': "角色管理", icon: 'stamp', rights:['view']},
]);
html 复制代码
          <el-menu-item :index="menu.path" v-for="menu in menuList" :key="menu.id">
            <el-icon v-if="menu.icon">
              <component :is="iconMapping[menu.icon]"/>
            </el-icon>
            {{menu.authName}}
          </el-menu-item>

...
import { iconMapping } from "@/components/mapping/menuIconMapping"
相关推荐
江城开朗的豌豆17 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆29 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆36 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆36 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆37 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山1 小时前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
daols888 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
行云&流水10 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js