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.mzph.cn/bicheng/38368.shtml

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

相关文章

张高兴的 MicroPython 入门指南:(一)环境配置、Blink、部署

目录 什么是 MicroPython环境配置 硬件部分软件部分Hello World&#xff01;Blink Pico 的引脚常见电子元件 面包板跳线开关发光二极管电阻使你的 Pico 闪烁部署参考 什么是 MicroPython MicroPython 是一个基于 Python 3.4 的高效实现&#xff0c;它专为微控制器和嵌入式系统设…

Springboot ResourceLoader获取指定package目录下所有的类(get class in jar on Linux)

get class in jar on Linux Springboot ResourceLoader获取指定package目录下所有的类 PathMatchingResourcePatternResolver resolver new PathMatchingResourcePatternResolver();String pattern ResourcePatternResolver.CLASSPATH_ALL_URL_PREFIX ClassUtils.convertClas…

“吃饭大学”!中国大学食堂排行TOP10(含西电)

同学们们&#xff0c;考研择校考虑的因素除了学术&#xff0c;地理位置等方面&#xff0c;你们还会考虑哪些因素呢&#xff1f;小研作为一个吃货&#xff0c;必定会考虑的一个因素当然是大学的食堂美食啊~ 那中国超级好吃的大学食堂在哪&#xff1f;一起来看看有没有你的目标院…

软考初级网络管理员__网站单选题

1.以下关于服务器端脚本的说法中&#xff0c;正确的是()。 Script 编写 只能采用VBScript 编写 浏览器不能解释执行 由服务器发送到客户端&#xff0c;客户端负责运行 2.站点首页最常用的文件名是()。 index.html homepage.html resource.html mainfrm.html 3.在HTML…

Java 项目的构建工具 Maven

Maven 一、Maven 简介二、Maven 安装配置1、Maven 下载安装2、Maven 配置 三、IDEA 集成 Maven四、Maven 依赖管理1、依赖配置2、依赖传递3、依赖范围4、生命周期 五、Maven 高级特性1、分模块设计与开发2、Maven 继承3、Maven 版本管理4、Maven 聚合5、私服 一、Maven 简介 M…

Mac虚拟机软件有什么用?

随着苹果M系列芯片电脑的推出&#xff0c;虚拟机的使用变得越来越流行。不同于苹果以往的Intel处理器电脑&#xff0c;其M系列芯片电脑无法安装双系统。如果要使用非macOS系统&#xff0c;可以通过创建虚拟机系统的方式实现。那么&#xff0c;虚拟机软件有什么作用和用途&#…

设计模式-代理模式和装饰者模式

二者都是结构型的设计模式. 1.代理模式 1.1定义 为其他对象提供一种代理以控制对这个对象的访问. 代理从code实现方面分为静态代理和动态代理两种&#xff1b; 从适用范围来看,分为远程代理,虚拟代理,保护代理,智能引用几种. 远程代理:为某个对象在不同的内存地址空间提供…

【Python】已解决:The method is not allowed for the requested URL.

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项进阶讨论总结 已解决&#xff1a;The method is not allowed for the requested URL. 一、分析问题背景 在开发Web应用程序时&#xff0c;常常需要处理不同的HTTP请求方法&#xff…

WPF的IValueConverter用于校验和格式化TextBox的数字输入

在数据绑定&#xff08;Data Binding&#xff09;的上下文中&#xff0c;我们经常使用继承 IValueConverter 接口的类&#xff0c;用于在源值和目标值之间进行转换。该接口定义了两个方法&#xff1a;Convert 和 ConvertBack&#xff0c;这两个方法分别用于从源值到目标值的转换…

centos 7.9 离线环境安装GPU服务环境

文章目录 centos 7.9 离线环境安装GPU服务环境系统配置更新 gcc更新内核安装显卡驱动安装cuda安装docker 和 nvidia-container-runtime验证 centos 7.9 离线环境安装GPU服务环境 基于centos 7.9 离线安装gpu 服务基础环境&#xff0c;用于在docker 中运行算法服务 系统配置 …

LeetCode 全排列

思路&#xff1a;这是一道暴力搜索问题&#xff0c;我们需要列出答案的所有可能组合。 题目给我们一个数组&#xff0c;我们很容易想到的做法是将数组中的元素进行排列&#xff0c;如何区分已选中和未选中的元素&#xff0c;容易想到的是建立一个标记数组&#xff0c;已经选中的…

二轴机器人装箱机:重塑物流效率,精准灵活,引领未来装箱新潮流

在现代化物流领域&#xff0c;高效、精准与灵活性无疑是各大企业追求的核心目标。而在这个日益追求自动化的时代&#xff0c;二轴机器人装箱机凭借其较佳的性能和出色的表现&#xff0c;正逐渐成为装箱作业的得力助手&#xff0c;引领着未来装箱新潮流。 一、高效&#xff1a;重…

解析桥式整流电路

下面这个桥式整流电路出场率很高&#xff0c;看着一定眼熟。 事实证明&#xff0c;强行灌输的东西总是难以下咽。记得读书那会&#xff0c;第一次看到这个电路时被吓到了&#xff0c;以至于直到这门课结束了也没搞清楚。 本文就来分析一下此电路中电流的走向&#xff0c;进而理…

Spark SQL 的总体工作流程

Spark SQL 是 Apache Spark 的一个模块,它提供了处理结构化和半结构化数据的能力。通过 Spark SQL,用户可以使用 SQL 语言或 DataFrame API 来执行数据查询和分析。这个模块允许开发者将 SQL 查询与 Spark 的数据处理能力结合起来,实现高效、优化的数据处理。下面是 Spark S…

Labview绘制柱状图

废话不多说&#xff0c;直接上图 我喜欢用NXG风格&#xff0c;这里我个人选的是xy图。 点击箭头指的地方 选择直方图 插值选择第一个 直方图类型我选的是第二个效果如图。 程序部分如图。 最后吐槽一句&#xff0c;现在看CSDN好多文章都要收费了&#xff0c;哪怕一些简单的入…

Spark SQL----ANSI Compliance

Spark SQL----ANSI Compliance 一、算术运算二、Cast2.1 Rounding in cast 三、存储分配四、Type coercion4.1 类型提升和优先级4.2 最不常见类型解析 五、SQL函数5.1 函数调用5.2 具有不同行为的函数 六、SQL操作符七、ANSI模式的有用函数八、SQL关键字(可选&#xff0c;默认禁…

浪子易支付最新增加订单投诉版源码

此版本增加了订单投诉功能&#xff0c;和一个好看的二次元模板。

【Python实战因果推断】9_元学习器4

目录 Double/Debiased Machine Learning Double/Debiased Machine Learning Double/Debiased ML 或 R-learner 可以看作是 FrischWaugh-Lovell 定理的改进版。其思路非常简单--在构建结果和治疗残差时使用 ML 模型 结果和干预残差&#xff1a; , 预估&#xff0c;预估 由于 …

Python28-4 KNN近邻算法

KNN&#xff08;K-Nearest Neighbors&#xff09;算法是一种常用的机器学习算法&#xff0c;主要用于分类和回归问题。 1. KNN算法的基本概念 KNN算法是一种基于实例的学习算法&#xff0c;也称为惰性学习&#xff08;Lazy Learning&#xff09;算法&#xff0c;因为它在训练…

51单片机第17步_外部中断

本章重点学习外部中断。 1、外部中断0框图&#xff1a; 2、外部中断1框图&#xff1a; 3、Keil C51中有一些关键字&#xff0c;需要牢记&#xff1a; interrupt 0&#xff1a;指定当前函数为外部中断0&#xff1b; interrupt 1&#xff1a;指定当前函数为定时器0中断&#x…