el-tree定义左边箭头,包括下级出现连线

效果图:

 

代码: 

<template><div class="agency-wrap"><el-treeclass="filter-tree":data="detailList":props="defaultProps"default-expand-all@node-click="onClickNode":filter-node-method="filterNode"ref="tree"></el-tree></div>
</template><script>
export default {data () {return {detailList: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],defaultProps: {children: 'children',label: 'label'}}},methods: {onClickNode (data) {console.log(data)},filterNode (value, data) {if (!value) return truereturn data.label.indexOf(value) !== -1}}
}
</script><style lang="scss" scoped>
.agency-wrap {@include wh(100%, 200px);background-color: pink;overflow: auto;margin-bottom: 20px;::v-deep .el-tree-node__label {font-size: 6px;}::v-deep {.el-icon-arrow-right::before {font-size: 6px;}}::v-deep .el-tree > .el-tree-node:after {border-top: none;}::v-deep .el-tree-node {position: relative;padding-left: 5px;}::v-deep .el-tree-node__children {padding-left: 5px;}::v-deep .el-tree-node :last-child:before {height: 16px;}::v-deep .el-tree-node:before {content: '';left: -2px;position: absolute;right: auto;border-width: .5px;}::v-deep .el-tree-node:after {content: '';left: -2px;position: absolute;right: auto;border-width: .5px;}::v-deep .el-tree-node:before {border-left: .5px dashed #1389BC;bottom: 0px;height: 100%;top: -13px;width: .5px;}::v-deep .el-tree {//   overflow-y: auto;//   overflow-x: scroll;overflow: auto;height: 100%;/*width:200px;*///   border: 1px solid blue;}::v-deep .el-tree-node:after {border-top: .5px dashed #1389BC;height: 10px;top: 6px;width: 9px;}::v-deep .el-tree .el-tree-node__expand-icon.expanded {-webkit-transform: rotate(0deg);transform: rotate(0deg);}::v-deep .el-tree .el-icon-caret-right:before {content: "\e723";font-size: 8px;color: #1389BC;position: absolute;left: -6px;top: -4px;}::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {content: "\e722";font-size: 8px;color: #1389BC;position: absolute;left: -6px;top: -4px;}::v-deep .el-tree-node__content > .el-tree-node__expand-icon {padding: 0;padding-left: 8px;}
}
</style>

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

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

相关文章

实战环境搭建-linux下安装tomcat

安装tomcat Index of /dist/tomcat/tomcat-9/v9.0.8/bin 下载apache-tomcat-9.0.8.tar.gz&#xff0c;可以使用wget; 2、将压缩包tar -zxvf apache-tomcat-9.0.8.tar.gz解压到/home/tomcat 3、修改环境变量 vi /etc/profile export JAVA_HOME/home/java/jdk1.8.0_221 expo…

x3daudio1_7.dll如何恢复,这6个方法都能修复x3daudio1_7.dll丢失问题

x3daudio1_7.dll文件缺失”。那么&#xff0c;什么是x3daudio17.dll文件&#xff1f;它的作用和影响又是什么呢&#xff1f;本文将详细介绍x3daudio17.dll文件的定义、作用和影响&#xff0c;并提供6个修复方法来解决这个问题。 一、x3daudio1_7.dll是什么&#xff1f; x3dau…

对话姿美堂创始人董事长徐熙明:不受短期诱惑和外界噪音的影响,坚持做难而正确的事

“ 客户至上 ” 整理 | 云舒&凯丰 编辑 | 梦遥 出品&#xff5c;极新&#xff06;北京电子商务协会 在过去几年中&#xff0c;直播电商经历了显著的发展&#xff0c;成为数字化零售领域的一个重要分支。随着智能手机和高速互联网的普及&#xff0c;消费者的购物习惯发生…

【Linux】编写第一个小程序:进度条

文章目录 1. 预备知识1.1 简单认识几个函数1.1.1 sleep()1.1.2 fflush()1.1.3 usleep()1.1.4 memset() 1.2 缓冲区1.3 回车与换行 2. 编写入门版的进度条2.1 基本逻辑2.2 美化效果2.3 代码实现2.4 执行效果 3. 编写升级版的进度条3.1 代码实现3.2 执行效果 1. 预备知识 1.1 简…

Defi安全--Zunami Protocol攻击事件分析

其它相关内容可见个人主页 1 Zunami攻击事件相关信息 2023.8.13发生在Ethereum上发生的攻击&#xff0c;存在两个攻击交易&#xff0c;具体信息如下&#xff1a; 攻击合约地址&#xff1a;Contract Address 攻击合约 攻击者地址&#xff1a;Zunami Protocol Exploiter 攻击…

机器学习_实战框架

文章目录 介绍机器学习的实战框架1.定义问题2.收集数据和预处理(1).收集数据(2).数据可视化(3).数据清洗(4).特征工程(5).构建特征集和标签集(6).拆分训练集、验证集和测试集。 3.选择算法并建立模型4.训练模型5.模型的评估和优化 介绍机器学习的实战框架 一个机器学习项目从开…

【Python进阶必备】一文掌握re库:实战正则表达式

目录 re库初识 re库基础使用方法 compile()函数 基本用法 正则表达式常用规则字符 match与search方法 match search match/search findall与finditer方法 使用findall()返回所有匹配项 使用findall()提取多个组的匹配 使用finditer()逐个返回Match对象 使用findi…

如何在 SwiftUI 中实现音频图表

文章目录 前言DataPoint 结构体BarChartView 结构体ContentView 结构体实现协议实现线图总结 前言 在可访问性方面&#xff0c;图表是复杂的事物之一。iOS 15 引入了一项名为“音频图表”的新功能。 下面我们将学习如何通过使用 accessibilityChartDescriptor 视图修饰符为任…

必须掌握的100+个Linux命令大全【持续更新中】

别有一番风趣的alias … note:: 寒蝉凄切&#xff0c;对长亭晚&#xff0c;骤雨初歇。 柳永《雨霖铃》 Linux alias命令用于设置指令的别名&#xff0c;可以将比较长的命令进行简化。 默认情况下会输出当前的设置&#xff1a; $ alias lls -lah lals -lAh llls -lh lsls --…

C语言操作符详解与进制

目录 一&#xff1a;操作符的分类 二&#xff1a;二进制和进制转换 2.1 2进制转10进制 2.1.1 10进制转2进制数字 2.2 2进制转8进制和16进制 2.2.1 2进制转8进制 2.2.2 2进制转16进制 三&#xff1a; 原码、反码、补码 四&#xff1a;移位操作符 4.1左移操作符 4.2 右…

<蓝桥杯软件赛>零基础备赛20周--第14周--BFS

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周。 在QQ群上交流答疑&am…

Excel地址

解题思路&#xff1a; 根据题中歪歪和笨笨的话可以有两种解法。 1.输入的数为多大&#xff0c;则循环1多少次&#xff0c;当值为27时就要进行进位操作。这时要分情况讨论。 当集合中元素为一个时&#xff0c;如26&#xff0c;则需要变为1 1&#xff0c;集合元素个数加一。 当…