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

1.问题描述

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

  {'id': 8, path:'/userManagement', 'authName': "用户管理", icon: 'User', rights:['view']},
<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)形式模拟后端返回的数据,发现还是显示不出来

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组件进行映射即可

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,
}
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']},
]);
          <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"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/112007.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用数据库备份方法,sql数据库备份方法

在信息时代&#xff0c;数据成为了公司的主要资产。然而&#xff0c;数据的安全性和完整性也成为企业管理的重要组成部分。因此&#xff0c;数据库备份至关重要。本文将详细介绍几种常见的数据库备份方法。 全备份 全备份是指数据库中所有数据的备份&#xff0c;包括数据文件、…

五、多表查询-4.6练习

一、准备数据 【效果展示】 emp1表&#xff08;员工表&#xff09;&#xff1a; dept1表&#xff08;部门表&#xff09;&#xff1a; salgrade表&#xff08;薪资等级表&#xff09;&#xff1a; 二、案例 1、查询员工的姓名、年龄、职位、部门信息&#xff08;隐式内连接&am…

SpringBoot + layui 框架实现一周免登陆功能

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

MySQL的日志undolog、binlog、redolog

1. 日志层次 binlog是Server层&#xff0c;undolog和redolog是innodb引擎层特有的。 2. 记录了什么 & 作用 binlog 记录了所有数据库结构变更和表数据修改的SQL日志。 主要用于数据备份和主从复制&#xff0c;比如误删数据了可以用binlog找回。 undolog 如下图&#…

Verilog 实现状态机自动售卖机

Verilog 实现状态机自动售卖机 教学视频&#xff1a;https://www.bilibili.com/video/BV1Ve411x75W?p33&spm_id_frompageDriver&vd_source19ae31dff4056e52d2729a4ca212602b 功能需求 使用1元、2元、5元面值的纸币进行支付&#xff0c;获取6元的物品&#xff0c;不设…

在el-tree懒加载中进行局部刷新

在进行懒加载的树组件中&#xff0c;操作子节点新增、修改以及删除操作时&#xff0c;需要对树组件进行局部刷新&#xff1a; /* 懒加载 */ async loadNode(node, resolve) {if (node.level 0) {// 异步加载根节点数据const data await fn({ parentId: });resolve(data);thi…

linux中学习控制进程的要点

1. 进程创建 1.1 fork函数 #include <unistd.h> pid_t fork(void); 返回值&#xff1a;自进程中返回0&#xff0c;父进程返回子进程id&#xff0c;出错返回-1 进程调用fork&#xff0c;当控制转移到内核中的fork代码后&#xff0c;内核会做以下操作 分配新的内存块和…

19.CSS雨云动画特效

效果 源码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Cloud & Rain Animation</title><link rel="stylesheet" href="style.css"> </head> <bo…

专题:平面、空间直线参数方程下的切线斜率问题

本文研究平面、空间直线在参数方程形式下&#xff0c;切线斜率&#xff08;即导数&#xff09;如何表示的问题。 如上图所示。 设 y f ( x ) &#xff0c; x φ ( t ) &#xff0c; y ψ ( t ) 当 t t 0 时&#xff0c; x x 0 &#xff0c; y y 0 &#xff0c;即点 A 坐…

最简单vue获取当前地区天气--高德开放平台实现

目录 前言 一、注册成为高德平台开发者 二、注册天气key 1.点击首页右上角打开控制台 2.创建新应用 三、vue项目使用 1.打开vue项目找到public下的index.html&#xff0c;如果是vue3的话直接在主目录打开index.html文件就行&#xff0c;主要就是打开出口文件 ​编辑 2.根据高德…

元矿山下的音视频应用

// 近年来&#xff0c;矿业的技术和管理模式随着元宇宙的火爆和自动驾驶技术的发展逐渐变化、升级&#xff0c;进而衍生出元矿山的概念&#xff0c;音视频技术也在其中成为了关键一环。LiveVideoStackCon 2023 上海站邀请了来自希迪智驾的任思亮&#xff0c;为大家分享希迪智…

无限计算力:探索云计算的无限可能性

这里写目录标题 前言云计算介绍服务模型&#xff1a; 应用领域&#xff1a;云计算主要体现在生活中的地方云计算未来发展的方向 前言 云计算是一种基于互联网的计算模型&#xff0c;通过它可以实现资源的共享、存储、管理和处理。它已经成为许多个人、企业和组织的重要技术基础…

MySQL数据库学习【基础篇】

&#x1f4c3;基础篇 下方链接使用科学上网速度可能会更加快一点哦&#xff01; 请点击查看数据库MySQL笔记大全 通用语法及分类 DDL: 数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库、表、字段&#xff09;DML: 数据操作语言&#xff0c;用来对数据库表中的…

mybatis与spring集成与spring aop集成pagehelper插件

Mybatis与Spring的集成 Mybatis是一款轻量级的ORM框架&#xff0c;而Spring是一个全栈式的框架&#xff0c;二者的结合可以让我们更加高效地进行数据持久化操作。 Mybatis与Spring的集成主要有两种方式&#xff1a;使用Spring的Mybatis支持和使用Mybatis的Spring支持。 使用…

再获殊荣 | 美格智能高算力AI模组SNM970荣获物联网行业“通信技术创新奖”

8月28日&#xff0c;由高科技行业门户OFweek维科网主办的OFweek 2023&#xff08;第八届&#xff09;物联网产业大会暨评选颁奖典礼在深圳福田会展中心隆重举行。会上正式公布了OFweek 2023&#xff08;第八届&#xff09;物联网与人工智能行业年度评选奖项&#xff0c;美格智能…

springmvc没有绿标,怎么配置tomcat插件运行?

一、添加插件后&#xff0c;刷新&#xff0c;自动从maven仓库下载tomcat插件 二、写好项目后&#xff0c;添加tomcat配置 三、即可点击绿标运行

flutter高德地图大头针

1、效果图 2、pub get #地图定位 amap_flutter_map: ^3.0.0 amap_flutter_location: ^3.0.0 3、上代码 import dart:async; import dart:io;import package:amap_flutter_location/amap_flutter_location.dart; import package:amap_flutter_location/amap_location_option…

用变压器实现德-英语言翻译【02/8】: 位置编码

一、说明 本文是“用变压器实现德-英语言翻译”系列的第二篇。它从头开始引入位置编码。然后&#xff0c;它解释了 PyTorch 如何实现位置编码。接下来是变压器实现。 二、技术背景 位置编码用于为序列中的每个标记或单词提供相对位置。阅读句子时&#xff0c;每个单词都依赖于它…

git 操作

merge操作 git checkout -b bugFix git commit //在bugFix branch上操作&#xff0c;并且commit git checkout main git commit //在main上操作&#xff0c;并且commit git merge bugFix //此时on main branch&#xff0c;如果在bugFix branch执行merge bugFix&#…

fastadmin think-queue supervisor配置

起因是微信支付回调需要同时做发货处理&#xff0c;但是发货接口不能影响,需要队列进行异步处理1. 1.fastadmin 后台购买queue插件(基于think-queue消息队列) 2.代码 2.1 添加文件&#xff1a;application---->extra--->queue.php 内容&#xff1a;我这里用的数据库做…