Vue:自动按需导入element-plus图标,动态导入

在 Vue3 中,component 动态组件的 is 属性必须绑定的是组件实例,而不是组件名字
所以需要在JS里面导入组件,创建一个对象存储,利用键值对,返回组件

如何配置自动导入看上一篇:https://blog.csdn.net/ruancexiaoming/article/details/136560017

例子:

//index.vue
<script setup>
const list = ref([{icon: "User",path: "/user",url: "UserManage/UserManage",},
])
//返回组件实例
function getIcon(data) {//把组件导入,组件:IEp[名称]let iconComponent = {User: IEpUser,Edit: IEpEdit,Search: IEpSearch}return iconComponent[data]
}
</script><template><div><component class="icon" :is="getIcon(list[0].icon)"></component></div>
</template>

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

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

相关文章

Java网络编程详解

目录 网络编程 1、概述 2、网络通信的要素 3、IP 4、端口 5、通信协议 6、TCP 文件上传 Tomcat 7、UDP 单方发送单方接受 双方发送接收 8、URL URL测试 URL下载网络资源 网络编程 1、概述 信件&#xff1a; 计算机网络&#xff1a; 计算机网络是指将地理位置不…

WPF —— TextBlock、LineBreak RadioButton控件详解

一:TextBlock 1&#xff1a;TextBlock 简介 <LineBreak/> 换行 显示文本 标签内容和content属性共存 2、TextBlock 常用的属性 Foreground&#xff1a;TextBlock的文本内容的颜色。 Background&#xff1a;背景&#xff0c;获取或设置要用于填充内容区域背景的 Brush…

冒泡排序的理解与实现【C语言、C++、java】

冒泡排序介绍 冒泡排序(Bubble Sort)&#xff0c;又被称为气泡排序或泡沫排序。 它是一种较简单的排序算法。它会遍历若干次要排序的数列&#xff0c;每次遍历时&#xff0c;它都会从前往后依次的比较相邻两个数的大小&#xff1b;如果前者比后者大&#xff0c;则交换它们的位…

一体机电脑辐射超标整改

电脑一体机是目前台式机和笔记本电脑之间的一个新型的市场产物&#xff0c;它将主机部分、显示器部分整合到一起的新形态电脑&#xff0c;该产品的创新在于内部元件的高度集成。随着无线技术的发展&#xff0c;电脑一体机的键盘、鼠标与显示器可实现无线链接&#xff0c;机器只…

美国站群服务器使用技巧与注意事项

美国站群服务器使用技巧与注意事项有哪些?RAKsmart小编为您整理发布美国站群服务器使用技巧与注意事项&#xff0c;希望对您有帮助。 美国站群服务器的使用技巧主要包括远程管理、灵活配置和备份还原&#xff0c;具体如下&#xff1a; 1. **远程管理**&#xff1a;用户可以通过…

洛谷 P1036 [NOIP2002 普及组] 选数

题目描述 已知 nn 个整数 x_1,x_2,\cdots,x_nx1​,x2​,⋯,xn​&#xff0c;以及 11 个整数 kk&#xff08;k<nk<n&#xff09;。从 nn 个整数中任选 kk 个整数相加&#xff0c;可分别得到一系列的和。例如当 n4n4&#xff0c;k3k3&#xff0c;44 个整数分别为 3,7,12,1…

计算机网络-第5章 运输层(2)

5.6 TCP可靠传输实现 以字节为单位的滑动窗口。 发送窗口已满&#xff0c;停止发送。 发送和接收的数据都来自缓存。 超时重传时间RTO选择&#xff1a;自适应算法&#xff0c; 选择确认SACK&#xff1a;只传送缺少的数据。大多数实现还是重传所有未被确认的数据块。 5.7 TCP的…

Spring 初学者遇到的问题

TagLibraryValidator Spring 实战 5.2 中有个表单需要在 jsp 中遍历数组&#xff0c;添加&#xff1a;<% taglib uri"http://java.sun.com/jsp/jstl/core" prefix"c" %>&#xff0c;访问时发现有些问题&#xff1a; java.lang.NoClassDefFoundError…

Java线程锁之Lock的使用

Lock 的使用 Lock 是java 1.5 中引入的线程同步工具&#xff0c;它主要用于多线程下共享资源的控制。本质上Lock 仅仅是一个接口&#xff0c; 可以通过显式定义同步锁对象来实现同步&#xff0c;能够提供比synchronized 更广泛的锁定操作&#xff0c;并支持多个相关的 Lock接…

LLM 推理优化

LLM 推理服务重点关注两个指标&#xff1a;吞吐量和时延&#xff1a; 吞吐量&#xff1a;主要从系统的角度来看&#xff0c;即系统在单位时间内能处理的 tokens 数量。计算方法为系统处理完成的 tokens个数除以对应耗时&#xff0c;其中 tokens 个数一般指输入序列和输出序列长…

掌握Mongodb,看完这篇文章就够了

目录 1.概念 2.操作 2.1数据库操作 2.2集合操作 2.3数据操作 3.查询 4.常用技术 5.python与MongoDB 1.概念 MongoDB是一种非关系型数据库&#xff08;NoSQL&#xff09;&#xff0c;它以灵活的文档存储格式&#xff08;BSON&#xff09;和强大的查询能…

MinGW-w64的下载与安装

文章目录 1 下载2 安装3 配置环境变量4 验证 1 下载 官网地址&#xff1a;https://www.mingw-w64.org/github地址&#xff1a;https://github.com/niXman/mingw-builds-binaries/releases windows下载 跳转github下载 版本号选择&#xff1a;13.2.0是GCC的版本号&#xff1b…

如何避免MYSQL主从延迟带来的读写问题?

在MYSQL 部署架构选型上&#xff0c;许多公司都会用到主从读写分离的架构&#xff0c;如下是一个一主一从的架构&#xff0c;主库master负责写入&#xff0c;从库slave进行读取。 但是既然是读写分离&#xff0c;必然会面临这样一个问题&#xff0c;当在主库上进行更新后&#…

010-$nextTick

$nextTick 1、问题2、$nextTick3、应用场景 1、问题 Vue 实现响应式&#xff0c;在 data 更新后&#xff0c;一定时间内&#xff0c;没有继续操作DOM&#xff0c;然后会触发浏览器渲染引擎去更新DOM&#xff0c;更新DOM也是需要时间的&#xff0c;所以 data 更新引起的 DOM更新…

FreeRTOS学习第9篇--队列介绍

目录 FreeRTOS学习第9篇--队列介绍1. 数据传输的方法1.1 任务之间如何传输数据1.2 队列的本质 2. 队列的工作原理和实现2.1 创建队列2.2 向队列发送数据2.3 从队列接收数据 3. 使用队列进行任务间的通信3.1 通信示例3.2 同步示例 结论 FreeRTOS学习第9篇–队列介绍 本文目标&a…

《C++游戏编程入门》第1章 类型、变量与标准I/O: Lost Fortune

《C游戏编程入门》第1章 类型、变量与标准I/O: Lost Fortune 1.1.1 使用C编写游戏1.1.2 生成可执行文件1.1.3 错误处理 1.2 第一个C程序01.game_over.cpp01.game_over2.cpp01.game_over3.cpp 1.4 使用算术运算符01.expensive_calculator.cpp 1.5 声明和初始化变量01.game_stats…

minimap2参数设置+解释【全网最详细】

Indexing -H: 使用同源聚合的k-mer(适用于PacBio数据) -k INT: k-mer的大小(不超过28)【默认值:15】 -W INT: minimizer窗口大小【默认值:10】 -I NUM: 每个~NUM输入碱基分割索引【默认值:4G】 -d FILE: 将索引转储到文件中 Mapping: -f FLOAT: 过滤掉顶部FLOAT比例的重…

【设计模式】概述及七大设计原则

设计模式 什么是设计模式 设计模式是前辈们对代码开发经验的总结&#xff0c;是解决一些特定问题的一系列套路。不是语法规定&#xff0c;也是一套用来提高代码复用性、可维护性、可读性、健壮性和安全性的解决方案。 学习设计模式的意义 设计模式的本质是面向对象设计原则…

QML | 在QML中导入JavaScript资源、导入JavaScript资源、包含一个JavaScript 资源

01 在QML中导入JavaScript资源 JavaScript资源可以被QML文档和其他JavaScript通过相对或者绝对路径进行导入。如果使用相对路径,位置解析需要相对于包含import语句的QML文档或JavaScript资源的位置。如果JavaScript需要从网络资源中进行获取,组件的status属性会被设置为Loadi…

PyCM:Python中的混淆矩阵库

PyCM&#xff1a;Python中的混淆矩阵库 在机器学习和数据科学领域&#xff0c;评估模型的性能是至关重要的。混淆矩阵是一种常用的评估工具&#xff0c;用于可视化和量化分类模型的预测结果。PyCM是一个开源的Python库&#xff0c;提供了丰富的功能来计算和分析混淆矩阵。本文将…