element-plus的Tree 树形控件添加图标

该文章为本菜鸡学习记录,如有错误还请大佬指教

本人刚开始接触vue框架,在使用element-plus组件想实现树形控件,发现官网的组件示例没有图标区分显示

实现效果

在这里插入图片描述

代码

<temple 部分


<el-tree :data="data" @node-click="handleNodeClick" node-key="id"><template #default="{ node, data }"><span class="custom-tree-node"><!-- 第一级固定一个图标 --><img src="./assets/main/depts.png" v-if="node.level === 1" /><!-- 非第一级且有子元素是个文件夹图标 --><img src="./assets/main/depts.png" v-if="node.childNodes.length && node.level !== 1" /><!-- 非第一级且没子元素且未选中是个文件图标 --><img src="./assets/main/dept.png" v-show="!node.childNodes.length && node.level !== 1" /><span@click="getNode(node)":class="[node.childNodes.length ? 'bold' : '', node.isCurrent ? 'orange' : '']">{{ node.label }}</span></span></template>
</el-tree>

数据展示如下:
<script 部分


const data: Tree[] = [{label: '部门列表',children: [{label: '部门1',},{label: '部门2',},{label: '镇街(平台)',children: [{label: '**街道',},{label: '**街道',},],},{label: '镇街综合行政执法队',children: [{label: '***综合行政执法队',},{label: '***综合行政执法队',},],},],},
]

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

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

相关文章

【详细 工程向】基于Smart3D的五镜头相机三维重建

数据部分&#xff1a; 数据要求 &#xff08;1&#xff09;每条行带至少从 3 个不同的视角进行拍摄。 &#xff08;2&#xff09;相邻相片之间的重叠度通常要求大于三分之二。 &#xff08;3&#xff09;不同拍摄视角之间夹角应该少于 15 度。 &#xff08;4&#xff09;通…

pdf转excel;pdf中表格提取

一、问题描述 在工作中或多或少会遇到&#xff1a;需要将某份pdf中的表格数据提取出来&#xff0c;以便能够“修改使用”数据 可将pdf中的表格提取出来&#xff0c;解决办法还有点复杂 尤其涉及“pdf中表格不是标准的单元格”的时候&#xff0c;提取数据到excel不太容易 比…

mean_x2 = (x**2).mean(dim=dims, keepdims=True)

这行代码的作用是计算输入张量 x 在指定维度上的平方均值&#xff0c;并保持原始维度的形状。具体来说&#xff1a; mean_x2 (x**2).mean(dimdims, keepdimsTrue) # [b,1,1] 参数解释 x**2&#xff1a;对输入张量 x 的每个元素进行平方运算。.mean(dimdims, keepdimsTrue)…

Enscape 4.2 安装教程(支持资源库)

软件介绍 Enscape 是专门为建筑、规划、景观及室内设计师打造的渲染产品&#xff0c;无需导入导出文件&#xff0c;在常用的软件内部即可看到逼真的渲染效果。 你无需了解记忆各种参数的用法&#xff0c;一切都是傻瓜式的一键渲染&#xff0c;你可以把精力更多地投入到设计中…

DBeaver工具连接Hive

DBeaver工具连接Hive 首先解压安装包dbeaver-ce-latest-x86_64-setup.zip,并安装dbeaver-ce-latest-x86_64-setup.exe; 安装Kerberos客户端4.1-amd64.msi; 查看集群节点/etc/hosts文件内容,并追加到C:\Windows\System32\drivers\etc\hosts; 下载集群用户keytab文件,并解压…

4.4 软件设计:UML顺序图

UML顺序图 1、 UML2、 UML顺序图2.1 顺序图组成对象生命线消息 2.2 顺序图和用例登录用例 2.3 顺序图建模顺序图建模参考策略建立顺序图的步骤建立顺序图的示例 3、面对对象的设计原则3.1 特点3.2 层次3.3 注意点类设计需要强内聚&#xff0c;弱耦合可重用性框架 1、 UML 统一…

云计算:定义、类型及对企业的影响

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 云计算&#xff1a;定义、类型及对企业的影响 云计算&#xff1a;定义、类型及对企业的影响 云计算&#xff1a;定义、类型及对企…

【FPGA开发】AXI-Lite总线协议解读、Verilog逻辑开发与仿真、Alex Forencich代码解读

目录 AXI是什么AXI是如何工作的AXI-Lite定义AXI-Lite的关键特性AXI-Lite信号列表AXI-Lite信号时序时钟和复位握手机制写请求通道&#xff08;AW&#xff09;写数据通道&#xff08;W&#xff09;写响应通道&#xff08;B&#xff09;读请求通道&#xff08;AR&#xff09;读数据…

场地预约系统(源码+文档+部署+讲解)

本文将深入解析“场地预约系统”的项目&#xff0c;探究其架构、功能以及技术栈&#xff0c;并分享获取完整源码的途径。 系统概述 本项目名称为场地预约系统&#xff0c;是一款方便用户进行场地预约的系统。该系统主要包括用户管理、分类管理、活动管理、场地管理、提现管理…

MYSQL——事务管理

什么是事务 在数据库使用者角度&#xff0c;事务就是完成一个事件。例如一个员工信息数据库&#xff0c;要完成员工离职的事件&#xff0c;可能需要很多操作&#xff0c;比如删除员工基本信息以及员工在公司的表现&#xff0c;薪资水平等。而这一系列的操作就是为了完成员工离…

计算机网络基本概念总结

IP地址 概念 使网络中的设备都有唯一的地址标识&#xff0c;用于表示其在网络中的位置。 格式 IP地址是一个32位的二进制数&#xff0c;通常被分割为4个8位二进制数&#xff08;也就是4个字节&#xff09;&#xff0c;如&#xff1a;01100100.00001000.00001010.00000110。通常…

MySQL系列之如何在Linux只安装客户端

导览 前言Q&#xff1a;如何安装一个Linux环境下的MySQL客户端一、准备文件1. 确认Server版本2. 选择Client安装文件 二、下载并安装1. 下载1.1 寻找文件1.2 文件说明 2. 安装2.1 上传至Linux服务器2.2 执行安装 三、连接验证1. 确认远程授权2. 建立远程连接 结语精彩回放 前言…

flink实战-- flink任务的火焰图如何使用

火焰图 Flame Graphs 是一种有效的可视化工具,可以帮助我们排查如下问题: 目前哪些方法正在消耗 CPU 资源?一个方法的消耗与其他方法相比如何?哪一系列的堆栈调用导致了特定方法的执行?y 轴表示调用栈,每一层都是一个函数。调用栈越深,火焰就越高,顶部就是正在执行的…

【css flex 多行均分有间隙布局】

小程序、web均可使用&#xff0c;我当前用的是小程序 <view class"job_tab_container flex_between"><view class"job_tab_item"></view><view class"job_tab_item"></view><view class"job_tab_item&qu…

高效实现多站点管理的策略与工具解读

内容概要 在当前的数字化环境中&#xff0c;多站点管理显得尤为重要。它不仅能帮助企业在多个市场中有效布局&#xff0c;还能促进资源的合理配置和利用。为了实现高效的多站点管理&#xff0c;首先需要了解其定义及重要性。多站点管理指的是企业在不同地理位置或市场上运营多…

C++STL容器详解——list

目录 一.list 1.list的介绍 2.为什么会有list? 二.list的常见接口 1.list的构造函数 2.list的遍历 3.迭代器类型 4.list的头插头删和尾插尾删 5.list任意位置的插入和删除 6.list的sort()及reverse() 7.迭代器失效 三.整体代码 一.list 1.list的介绍 list的文档说…

【Linux系统编程】第四十四弹---从TID到线程封装:全面掌握线程管理的核心技巧

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、tid是什么 1.1、理解库 1.2、理解tid 1.3、tid中线程局部存储 2、封装线程 2.1、基本结构 2.2、函数实现 2.3、使用…

WPF 打包

打包为单个exe文件直接运行 - - -版本.NET8 新建WPF项目 右键 - 发布 选择发布文件夹 选择发布文件夹 选择发布文件夹 配置 配置,保存 发布 WPF 打包为exe安装程序 示例 实现思路 引导项目中嵌入其它项目可运行目录的zip引导项目中解压zip文件到指定文件夹是…

percona tpc-c程序压测mysql8.0并绘图

1 概述 OLTP数据库选型一般会从稳定性、性能、易用性、官方文档等因素考虑。而在性能这因素&#xff0c;基准测试有sysbench和tpc-c&#xff08;tpc-e是tpc-c的升级版&#xff09;。sysbench的底层测试用例的表结构是简单的&#xff0c;并且不支持join&#xff0c;针对以上两个…

ArcGIS软件之“计算面积几何”地图制作

目录 一、消防站的泰森多边形ex12二、人口调查的泰森多边形三、人口调查的泰森多边形属性设置四、计算面积几何,用于求密度五、求密度六、给“现有中学”属性 R1赋值七、“现有中学”设置多环缓存区 并为它赋值八、“土地使用”为不同的功能区赋值九、三个图层相交十、计算面积…