vue 组件el-tree添加结构指示线条

效果展示:

注意:组件中需要添加:indent="0" 进行子级缩进处理,否则会出现子级缩进逐级递增

 :expand-on-click-node="false" 设置点击箭头图标才会展开或者收起

代码:

<el-tree class="tree filter-tree" :data="treeList" :props="defaultProps" default-expand-all :indent="0":expand-on-click-node="false" @node-click="handleNodeClick" :filter-node-method="filterNode" highlight-current ref="tree">
</el-tree>
/* 点击树结构项的选中颜色 */.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {background-color: #c7d1de;}/* 树形结构节点添加连线 */.tree {.el-tree-node {position: relative;padding-left: 20px;/* 缩进量 */}.el-tree-node__children {padding-left: 20px;/* 缩进量 */}/* 竖线 */.el-tree-node::before {content: "";height: 100%;width: 1px;position: absolute;left: -3px;top: -26px;border-width: 1px;border-left: 1px dashed #52627C;}/* 当前层最后一个节点的竖线高度固定 */.el-tree-node:last-child::before {height: 38px;/* 可以自己调节到合适数值 */}/* 横线 */.el-tree-node::after {content: "";width: 24px;height: 20px;position: absolute;left: -3px;top: 16px;border-width: 1px;border-top: 1px dashed #52627C;}/* 去掉最顶层的虚线,放最下面样式才不会被上面的覆盖了 */&>.el-tree-node::after {border-top: none;}&>.el-tree-node::before {border-left: none;}/* 展开关闭的icon */.el-tree-node__expand-icon {font-size: 16px;/* 叶子节点(无子节点) */&.is-leaf {color: transparent;/* 也可以去掉 */display: none;}}}

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

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

相关文章

【解码现代 C++】:实现自己的智能 【String 类】

目录 1. 经典的String类问题 1.1 构造函数 小李的理解 1.2 析构函数 小李的理解 1.3 测试函数 小李的理解 1.4 需要记住的知识点 2. 浅拷贝 2.1 什么是浅拷贝 小李的理解 2.2 需要记住的知识点 3. 深拷贝 3.1 传统版写法的String类 3.1.1 拷贝构造函数 小李的理…

入门PHP就来我这(纯干货)08

~~~~ 有胆量你就来跟着路老师卷起来&#xff01; -- 纯干货&#xff0c;技术知识分享 ~~~~ 路老师给大家分享PHP语言的知识了&#xff0c;旨在想让大家入门PHP&#xff0c;并深入了解PHP语言。 1 PHP对象的高级应用 1.1 final关键字 final 最终的、最后的。被final修饰过的类…

LabVIEW汽车ECU测试系统

开发了一个基于LabVIEW开发的汽车发动机控制单元&#xff08;ECU&#xff09;测试系统。该系统使用了NI的硬件和LabVIEW软件&#xff0c;能够自动执行ECU的功能测试和性能测试&#xff0c;确保其在不同工作条件下的可靠性和功能性。通过自动化测试系统&#xff0c;大大提高了测…

【docker nvidia/cuda】ubuntu20.04安装docker踩坑记录

docker nvidia 1.遇到这个错误&#xff0c;直接上魔法(科学上网) OpenSSL SSL_connect: Could not connect to nvidia.github.io:443 这个error是运行 NVIDIA官方docker安装教程 第一个 curl 命令是遇到的 2. apt-get 更新 sudo apt update遇到 error https://download.do…

CDC实时同步进行时遇到不可抗力中断了怎么办?

目录 一、CDC技术的概念 二、CDC技术的应用场景 1.数据复制和同步 2.实时数据仓库 3.业务过程监控和审计 4.ETL 进程优化 三、CDC与数据管道的关系 1.区别 CDC&#xff08;Change Data Capture&#xff09; 数据管道&#xff08;Data Pipeline&#xff09; 2.联系 CDC是数据管道…

4面体空间5点结构种类与占比

在30个点的4面体中取5个点&#xff0c;有30*29*28*27*26/(5*4*3*2)142506种取法&#xff0c; 这里要求5个点必须是直链或支链。共有496个组合符合要求&#xff0c;按平移对称性可分成181个不同的结构 结构 数量 结构 数量 结构 数量 结构 数量 结构 数量 结构 数量 …

深入分析 Android BroadcastReceiver (九)

文章目录 深入分析 Android BroadcastReceiver (九)1. Android 广播机制的扩展应用与高级优化1.1 广播机制的扩展应用1.1.1 示例&#xff1a;有序广播1.1.2 示例&#xff1a;粘性广播1.1.3 示例&#xff1a;局部广播 1.2 广播机制的高级优化1.2.1 示例&#xff1a;使用 Pending…

【C++】 解决 C++ 语言报错:Double Free or Corruption

文章目录 引言 双重释放或内存破坏&#xff08;Double Free or Corruption&#xff09;是 C 编程中常见且严重的内存管理问题。当程序尝试多次释放同一块内存或对已经释放的内存进行操作时&#xff0c;就会导致双重释放或内存破坏错误。这种错误不仅会导致程序崩溃&#xff0c…

跑腿平台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;基础数据管理&#xff0c;管理员管理&#xff0c;接单详情管理&#xff0c;跑腿员管理&#xff0c;跑腿任务管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;跑腿任务&#xff0c;接单员&…

HTML如何在图片上添加文字

HTML如何在图片上添加文字 当我们开发一个页面&#xff0c;插入图片时&#xff0c;需要有一组文字对图片进行描述。那么HTML中如何在图片上添加文字呢&#xff1f;这篇文章告诉你。 先让我们来看下效果图&#xff1a; 句子“这是一张夜空图片”被放置在了图片的左下角。 那么…

Wing FTP Server

文章目录 1.Wing FTP Server简介1.1主要特点1.2使用教程 2.高级用法2.1Lua脚本,案例1 1.Wing FTP Server简介 Wing FTP Server&#xff0c;是一个专业的跨平台FTP服务器端&#xff0c;它拥有不错的速度、可靠性和一个友好的配置界面。它除了能提供FTP的基本服务功能以外&#…

空调计费系统是什么,你知道吗

空调计费系统是一种通过对使用空调的时间和能源消耗进行监测和计量来进行费用计算的系统。它广泛应用于各种场所&#xff0c;如家庭、办公室、商场等&#xff0c;为用户提供了方便、准确的能源使用管理和费用控制。 可实现功能 智能计费&#xff1a;中央空调分户计费系统通过智…

【yolov8系列】ubuntu上yolov8的开启训练的简单记录

前言 yolov8的广泛使用&#xff0c;拉取yolov8源码工程&#xff0c;然后配置环境后直接运行&#xff0c;初步验证自己数据的检测效果&#xff0c;在数据集准备OK的情况下 需要信手拈来&#xff0c;以保证开发过程的高效进行。 本篇博客更注意为了方便自己使用时参考。顺便也记录…

Nginx 常用配置与应用

Nginx 常用配置与应用 官网地址&#xff1a;https://nginx.org/en/docs/ 目录 Nginx 常用配置与应用 Nginx总架构 正向代理 反向代理 Nginx 基本配置反向代理案例 负载均衡 Nginx总架构 进程模型 正向代理 反向代理 Nginx 基本配置反向代理案例 负载均衡 Nginx 基本配置…

Linux启动elasticsearch,提示权限不够

Linux启动elasticsearch&#xff0c;提示权限不够&#xff0c;如下图所示&#xff1a; 解决办法&#xff1a; 设置文件所有者&#xff0c;即使用户由权限访问文件 sudo chown -R 用户名[:新组] ./elasticsearch-8.10.4 //切换到elasticsearch-8.10.4目录同级 chown详细格式…

基于SpringBoot的就业信息管理系统

你好&#xff0c;我是计算机学姐码农小野&#xff01;如果你对就业信息管理系统感兴趣或有相关需求&#xff0c;欢迎私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; SpringBootMySql 工具&#xff1a; MyEclipse、Tomcat 系统展示…

ChatGPT如何提升论文写作(附指令集合)

先讲前提&#xff1a; ChatGPT无论是3.5还是4.0都存在非常严重的幻觉问题&#xff0c;目前ChatGPT无法替代搜索引擎。 如果你希望得到更加优质的体验&#xff0c;请用GPT-4.0&#xff0c;幻觉问题上比3.5大幅降低 ChatGPT中文版&#xff0c;一站式AI创作平台​aibox365.com …

微信小程序的智慧物流平台-计算机毕业设计源码49796

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3研究方法 1.4开发技术 1.4.1 微信开发者工具 1.4.2 Node.JS框架 1.4.3 MySQL数据库 1.5论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 用户登录流程 2.2.2 数据删除流程 2.3 系统功能分…

为什么英智智能宝能让律师工作事半功倍

大语言模型能够极大提高人们的知识理解能力和知识服务能力&#xff0c;法律服务是典型的知识服务领域&#xff0c;据悉律师有38%的任务都是重复性工作&#xff0c;这些任务有潜力被大模型替代。 但在法律行业中的高度专业且复杂的问题时&#xff0c;通用型大模型的回答虽能提供…

Twitter群发消息API接口的功能?如何配置?

Twitter群发消息API接口怎么申请&#xff1f;如何使用API接口&#xff1f; 为了方便企业和开发者有效地与用户互动&#xff0c;Twitter提供了各种API接口&#xff0c;其中Twitter群发消息API接口尤为重要。AokSend将详细介绍Twitter群发消息API接口的功能及其应用场景。 Twit…