elementui中的tree自定义图标

需求:实现如下样式的树形列表

自定义树的图标以及点击时,可以根据子级的关闭,切换图标

<el-tree :data="treeList" :props="defaultProps"><template #default="{ node, data }"><span class="custom-tree-node"><img v-if="!node.expanded " class="node-img" :src="./aaa.svg" /><img v-if="node.expanded" class="node-img" :src="./bbb.svg" /><span>{{ node.label }}</span></span></template>
</el-tree>

参考:element-ui的el-tree自定义图标 - 简书

https://download.csdn.net/blog/column/12320696/130819498

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

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

相关文章

【C/C++ 02】希尔排序

希尔排序虽然是直接插入排序的升级版本&#xff0c;和插入排序有着相同的特性&#xff0c;即原始数组有序度越高则算法的时间复杂度越低&#xff08;预排序机制&#xff09;&#xff0c;但是是不稳定排序算法。 为了降低算法的时间复杂度&#xff0c;所以我们需要在排序之前尽…

ARCGIS PRO SDK 数据库属性域设置与获取

一、数据库创建属性域。 sdk3.1 以下的开发版本不支持&#xff0c;不能使用 Pro SDK 向域添加新的编码值&#xff0c;可以使用地理处理工具&#xff1a; 创建属性域 Dim va As IReadOnlyList(Of String) Dim gpResult As ArcGIS.Desktop.Core.Geoprocessing.IGPResult Dim env…

【EEG信号处理】ERP相关

ERP&#xff0c;全称为event-related potential&#xff0c;中文是事件相关电位。 首先要明确的一点是&#xff0c;ERP是根据脑电图EEG得到的&#xff0c;他是EEG的一部分&#xff0c;是最常用的时域分析方法 可能有一部分是介绍不到的&#xff0c;望谅解 在维基百科中给的定义…

力扣题集(第一弹)

一日练,一日功;一日不练十日空。 学编程离不开刷题&#xff0c;接下来让我们来看几个力扣上的题目。 1. 242. 有效的字母异位词 题目描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数…

【数据结构与算法】之哈希表系列-20240129

这里写目录标题 一、217. 存在重复元素二、219. 存在重复元素 II三、242. 有效的字母异位词四、268. 丢失的数字五、290. 单词规律六、349. 两个数组的交集七、350. 两个数组的交集 II 一、217. 存在重复元素 简单 给你一个整数数组 nums 。如果任一值在数组中出现至少两次 &a…

VS+QT 配置Eigen库

1、下载Eigen库&#xff0c;如下&#xff1a; 2、解压到项目目录下&#xff0c;如下&#xff1a; 3、 在C/C中包含文件&#xff0c;如下&#xff1a; 4、在头文件中加入如下代码&#xff1a; 5、测试代码&#xff1a; //.cpp文件 #include "testEigen.h"testEigen::…

Linux下安装edge

edge具有及其强大的功能&#xff0c;受到很多人的喜爱&#xff0c;它也开发Linux版本&#xff0c;下面是安装方法&#xff1a; 1.去edge官网下载Linux(.deb)文件。 https://www.microsoft.com/zh-cn/edge/download?formMA13FJ 2.下载之后输入以下指令&#xff08;后面是安装…

Blender 与 3ds Max | 面对面的直接较量(2024)

Blender和3ds Max&#xff0c;哪个动画软件更好&#xff1f;作为一个从事动画领域十年的专业人士&#xff0c;Mark McPherson提供了八条最新建议&#xff0c;帮助你了解哪个软件更适合满足你的3D动画需求。 1.建模 获胜者&#xff1a;3ds Max。3ds Max的建模机制已经被证明是…

软件架构设计

一、考点分布 软件架构的概念&#xff08;※※※&#xff09;基于架构的软件开发&#xff08;※※※※&#xff09;软件架构风格&#xff08;※※※※※&#xff09;特定领域软件架构&#xff08;※※※&#xff09;软件质量属性&#xff08;※※※※※&#xff09;软件架构评估…

第一节 分布式架构设计理论与Zookeeper环境搭建

1. 分布式架构设计理论 学习Zookeeper之前,我们需要掌握一些分布式系统基础知识&#xff1a;了解分布式系统的概念、原理。 配置管理 域名服务 分布式同步 发布订阅 1. 分布式架构介绍 1.1 什么是分布式 《分布式系统原理和范型》一书中是这样定义分布式系统的&#xff1a…

【ArcGIS微课1000例】0099:土地利用变化分析

本实验讲述在ArcGIS软件中基于两期土地利用数据,做土地利用变化分析。 文章目录 一、实验描述二、实验过程三、注意事项一、实验描述 对城市土地利用情况进行分析时,需要考虑不同时期土地利用图层在空间上的差异性,如农用地转建筑用地的空间变化。而该变化过程表现为各时期…

C#,贝尔数(Bell Number)的计算方法与源程序

1 埃里克坦普尔贝尔 贝尔数是组合数学中的一组整数数列&#xff0c;以埃里克坦普尔贝尔&#xff08;Eric Temple Bell&#xff09;命名&#xff0c; 埃里克坦普尔贝尔&#xff08;生于1883年2月7日&#xff0c;苏格兰阿伯丁郡阿伯丁&#xff0c;于1960年12月21日在美国加利福尼…

2024年数学建模美赛C题(预测 Wordle)——思路、程序总结分享

1: 问题描述与要求 《纽约时报》要求您对本文件中的结果进行分析&#xff0c;以回答几个问题。 问题1&#xff1a;报告结果的数量每天都在变化。开发一个模型来解释这种变化&#xff0c;并使用您的模型为2023年3月1日报告的结果数量创建一个预测区间。这个词的任何属性是否会…

设计模式——模板方法模式(Template Method Pattern)

概述 模板方法模式&#xff1a;定义一个操作中算法的框架&#xff0c;而将一些步骤延迟到子类中。模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。模板方法模式是一种基于继承的代码复用技术&#xff0c;它是一种类行为型模式。模板方法模式是结…

【开源】JAVA+Vue.js实现超市商品管理系统

目录 一、摘要1.1 简介1.2 项目录屏 二、研究内容2.1 数据中心模块2.2 超市区域模块2.3 超市货架模块2.4 商品类型模块2.5 商品档案模块 三、系统设计3.1 用例图3.2 时序图3.3 类图3.4 E-R图 四、系统实现4.1 登录4.2 注册4.3 主页4.4 超市区域管理4.5 超市货架管理4.6 商品类型…

标准库中的string类(下)——“C++”

各位CSDN的uu们你们好呀&#xff0c;这段时间小雅兰的内容仍然是Cstring类的使用的内容&#xff0c;下面&#xff0c;让我们进入string类的世界吧&#xff01;&#xff01;&#xff01; string类的常用接口说明 string - C Reference string类的常用接口说明 string类对象的修…

一文理清楚-Docker 容器如何工作

Docker 容器如何工作 集装箱什么是虚拟机&#xff1f;虚拟化如何运作&#xff1f;什么是容器&#xff1f;什么是 Docker&#xff1f;总结 五星上将麦克阿瑟曾经说过&#xff1a;在docker面前&#xff0c;虚拟机就是个弟弟 集装箱 《盒子&#xff1a;集装箱如何让世界变得更小&…

【BUG】golang gorm导入数据库报错 “unexpected type clause.Expr“

帮同事排查一个gorm导入数据报错的问题 事发现场 ck sql CREATE TABLE ods_api.t_sms_jg_msg_callback_dis (app_key String DEFAULT COMMENT 应用标识,callback_type Int32 DEFAULT 0 COMMENT 0送达&#xff0c;1回执,channel Int32 DEFAULT 0 COMMENT uid下发的渠道,mode…

自定义vue通用左侧菜单组件(未完善版本)

使用到的技术&#xff1a; vue3、pinia、view-ui-plus 实现的功能&#xff1a; 传入一个菜单数组数据&#xff0c;自动生成一个左侧菜单栏。菜单栏可以添加、删除、展开、重命名&#xff0c;拖动插入位置等。 效果预览&#xff1a; 代码&#xff1a; c-menu-wrap.vue <t…

【Linux】压缩脚本、报警脚本

一、压缩搅拌 要求&#xff1a; 写一个脚本&#xff0c;完成如下功能 传递一个参数给脚本&#xff0c;此参数为gzip、bzip2或者xz三者之一&#xff1b; (1) 如果参数1的值为gzip&#xff0c;则使用tar和gzip归档压缩/etc目录至/backups目录中&#xff0c;并命名为/backups/etc…