Element-plus使用记录

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>

 

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

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

相关文章

爬虫零基础学习,第一天,安装环境,requests库常用命令的讲解

Python爬虫 爬虫学习思路 URL内容获取&#xff0c;requests的基本常用语法 import requests # 先向目标网站发送请求 url "http://www.baidu.com" r requests.get(url) # 可以用看一下访问码返回值是不是200&#xff0c;若是200则表示访问成功 print(r.status_…

RustGUI学习(iced)之小部件(一):如何使用按钮和文本标签部件

前言 本专栏是学习Rust的GUI库iced的合集&#xff0c;将介绍iced涉及的各个小部件分别介绍&#xff0c;最后会汇总为一个总的程序。 iced是RustGUI中比较强大的一个&#xff0c;目前处于发展中&#xff08;即版本可能会改变&#xff09;&#xff0c;本专栏基于版本0.12.1. 概述…

ZYNQ DMA环通测试

DMA(Direct Memory Access,直接内存存取),是指外部设 备不通过CPU直接与系统内存交换数据的接口技术。要将外设数据读入内存或将内存传送到外 设,一般都要通过CPU控制完成,如采用查询或中断方式。如前面讲到的BRAM实验。 虽然中断方式可以提高CPU的利用率,但是也会有效率…

前端CSS基础8(盒子模型(margin、border、padding、content))

前端CSS基础8&#xff08;盒子模型&#xff08;margin、border、padding、content&#xff09;&#xff09; CSS盒子模型CSS中常用的长度单位元素的分类&#xff0c;各个元素的显示模式修改元素的显示模式&#xff08;类型&#xff09;盒子模型的组成部分盒子内容区-contentCSS…

关于分布式锁的释放和spring事务提交时机不符合预期从而带来的数据不一致的问题

提要 首先注意&#xff0c;本文探讨的不是分布式事务&#xff0c;请读者注意区分&#xff01; 在我们的日常开发种&#xff0c;分布式锁和spring事务是常见的两种控制数据一致性的方式。 分布式锁和spring事务各自的作用就不做阐述了&#xff0c;不是本文重点&#xff0c;本文…

AttributeError: module ‘backend_interagg‘ has no attribute ‘FigureCanvas‘.

问题1&#xff1a; AttributeError: module backend_interagg has no attribute FigureCanvas. 解决方案&#xff1a; import matplotlib matplotlib.use(Agg) # 选择合适的后端&#xff0c;如Aggimport matplotlib.pyplot as plt在你的代码开头加上这两行代码&#xff0c;…

AIGC技术的发展现状与未来趋势

AIGC&#xff08;人工智能生成内容&#xff09;技术是近年来快速发展的领域之一&#xff0c;它涉及使用人工智能来创建或编辑内容&#xff0c;包括文本、图像、音乐和视频等。这项技术的进步为各个行业带来了革命性的变化&#xff0c;同时也引发了一系列伦理和风险问题。 一、技…

安卓一键换壁纸

360手机有一个很赞的应用&#xff0c;没有界面&#xff0c;点击一下图标换一张壁纸&#xff0c;其他手机都没有看到这个功能。 vivo倒是有亮屏换锁屏壁纸。 1.无界面应用 https://blog.51cto.com/u_16213305/8503774 AndroidManifest.xml 主题改为不显示 <activity an…

宜搜科技死磕港交所上市:从搜索引擎到广告投放,业绩疲态凸显

近日&#xff0c;宜搜科技控股有限公司&#xff08;下称“宜搜科技”&#xff09;向港交所递交招股书&#xff0c;计划在香港主板上市&#xff0c;中银国际为其独家保荐人。 值得注意的是&#xff0c;宜搜科技已在资本市场辗转多年。该公司曾于2014年向纽交所递交上市申请&…

CentOS7编译jsoncpp静态库

1. 官网下载源码 github地址&#xff1a;GitHub - open-source-parsers/jsoncpp at update 2. 编译 Unzip jsoncpp-master.zip Cd jsoncpp-master mkdir -p ./build/debug cd ./build/debug/ cmake -DCMAKE_BUILD_TYPEdebug -DBUILD_SHARED_LIBSOFF -DCMAKE_ARCHIVE_OUTPUT_D…

docker快速搭建部署mqtt

文章目录 前言一、mqtt是什么&#xff1f;二、使用步骤1.引入库2.创建临时容器3.创建挂在目录4.将临时容器的配置挂载到宿主机中5.删除临时容器6.运行容器并挂载文件7.登录EMQX内置的管理控制台 总结 前言 一、mqtt是什么&#xff1f; MQTT&#xff08;Message Queuing Teleme…

Ts类型体操详讲 之 extends infer (下)

目录 1、函数 &#xff08;1&#xff09;提取参数类型 &#xff08;2&#xff09;提取返回值类型 2、构造器 &#xff08;1&#xff09;提取构造器返回值 &#xff08;2&#xff09;提取构造器参数类型 3、索引类型 本章我们继续上节的内容继续&#xff0c;展示我们对ex…

送变电乙级资质从入门到成功申请

1. 初步了解与规划 研究资质标准&#xff1a;首先&#xff0c;详细研究最新的送变电乙级资质标准&#xff0c;包括企业资质条件、人员配置要求、技术设备标准等。企业准备&#xff1a;确保企业具备独立法人资格&#xff0c;注册资本达标&#xff0c;且企业信誉良好。制定计划&…

C++ //练习 13.24 如果本节中的HasPtr版本未定义析构函数,将会发生什么?如果未定义拷贝构造函数,将会发生什么?

C Primer&#xff08;第5版&#xff09; 练习 13.24 练习 13.24 如果本节中的HasPtr版本未定义析构函数&#xff0c;将会发生什么&#xff1f;如果未定义拷贝构造函数&#xff0c;将会发生什么&#xff1f; 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工…

华为OD机试真题-田忌赛马-2024年OD统一考试(C卷D卷)

题目描述: 给定两个只包含数字的数组a,b,调整数组 a 里面数字的顺序,使得尽可能多的 a[i] >b[i]。数组 a和 b 中的数字各不相同。 输出所有可以达到最优结果的 a 数组的数量 输入描述: 输入的第一行是数组 a 中的数字,其中只包含数字,每两个数字之间相隔一个空格,a…

提升你的C编程技能:使用cURL下载Kwai视频

概述 本文将介绍如何利用C语言以及cURL库来实现Kwai视频的下载。cURL作为一个功能强大的网络传输工具&#xff0c;能够在C语言环境下轻松地实现数据的传输。我们还将探讨如何运用代理IP技术&#xff0c;提升爬虫的匿名性和效率&#xff0c;以适应Kwai视频平台的发展趋势。 正…

报告!这里发现了一个赛博炼丹的神级平台!

众所周知&#xff0c;“赛博炼丹”是一个AI开发研究领域古老又神秘的活动&#xff0c;它往往对炼丹平台有很高的要求。如果你也是一路从“炼丹小白”成长到“资深AI算法工程师”&#xff0c;那你一定懂我在说什么&#xff1f;说好了&#xff0c;天台见&#xff01; GpuMall智算…

力扣HOT100 - 108. 将有序数组转换为二叉搜索树

解题思路&#xff1a; 二叉搜索树一般使用中序遍历 class Solution {public TreeNode sortedArrayToBST(int[] nums) {return helper(nums,0,nums.length-1);}public TreeNode helper(int[] nums,int left,int right){if(left>right) return null;//确定根节点//总是选择中…

Vue 3 + TypeScript + Vite 2024年4月最新管理系统基建

Vue 3 TypeScript Vite 2024年4月最新管理系统基建 相关依赖 vue: ^3.4.21vite: ^5.2.0typescript: ^5.2.2eslint: ^9.0.0 1. 初始化项目 1.1 node版本要求 node: v18.17.1 1.2. 创建项目 使用 PNPM: # 创建项目 pnpm create vite vue3-element-template --template …

【缓存服务】⭐️自定义实现一个简易的数据缓存

目录 &#x1f378;前言 &#x1f37b;手写缓存服务 &#xff08;1&#xff09;缓存实体类 &#xff08;2&#xff09;缓存工具类 &#xff08;3&#xff09;测试缓存服务 &#x1f377;已有的缓存工具 &#x1f379;章末 &#x1f378;前言 俗话说 有轮子不用 就是玩 开个…