<span class="mytree">
<el-tree></el-tree>
</span>
//设置图标的样式
.mytree /deep/ {
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
content: "\e723";
font-size 16px;
color #1389BC;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
content: "\e722";
font-size 16px;
color #1389BC;
}
}
//设置虚线的样式
.mytree /deep/ {
overflow-y:auto;
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node {
position: relative;
padding-left: 16px;
}
//节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
.el-tree-node__expand-icon.is-leaf {
display: none;
}
.el-tree-node__children {
padding-left: 16px;
}
.el-tree-node :last-child:before {
height: 38px;
}
.el-tree > .el-tree-node:before {
border-left: none;
}
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node:before {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:after {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:before {
border-left: 1px dashed #1389BC;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.el-tree-node:after {
border-top: 1px dashed #1389BC;
height: 20px;
top: 12px;
width: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
content: "\e723";
font-size 16px;
color #1389BC;
position absolute;
left -20px;
top -8px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
content: "\e722";
font-size 16px;
color #1389BC;
position absolute;
left -20px;
top -8px;
}
.el-tree-node__content>.el-tree-node__expand-icon {
padding 0;
}
}
原文链接 ：https://blog.csdn.net/shadow_yi_0416/article/details/112540013
参看链接：
https://blog.csdn.net/Sabrina_cc/article/details/125319257
===========================================================
事例：
<el-tree :current-node-key="currentNodeKey" :data="data" :props="defaultProps" @node-click="handleNodeClick">
<template #default="{ data }">
<span class="el-tree-node__label"> {{ data.label }}</span>
</template>
</el-tree>
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 3',
children: [{
label: '二级 3-1'
},
{
label: '三级 2-2-2'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
}]
}],
-----样式----
-----修改图标----
::v-deep .el-tree-node__expand-icon {
z-index: 3;
}
::v-deep :not(.is-leaf).el-icon-caret-right:before {
content: "\e6d9";
margin-top: 5px;
border: 1px solid #ccc;
padding: 1px;
background-color: #ffffff;
}
::v-deep .expanded {
transform: rotate(0deg);
}
::v-deep .el-tree-node__expand-icon.is-leaf {
display: none;
}
::v-deep .expanded:before {
content: "\e6d8" !important;
margin-top: 5px;
border: 1px solid #ccc;
padding: 1px;
background-color: #ffffff;
}
//两根纵线的距离
::v-deep .el-tree-node__children {
padding-left: 15px;
}
----引导线----
::v-deep .el-tree-node {
position: relative;
margin-left: 11px;
white-space: normal;
}
//设置引导线的纵线
::v-deep .el-tree-node:before {
content: "";
left: -13px;
position: absolute;
border-width: 1px;
height: 100%;
border-left: 1px solid #000;
z-index: 0;
}
//最后一个元素的高要修改
::v-deep .el-tree-node:last-child:before {
height: calc(17px);
border-color: #000;
}
//第一个el-tree-node 不显示引导线
.el-tree ::v-deep>.el-tree-node:before {
border-color: transparent;
}
//第一个el-tree-node 不显示引导线
.el-tree ::v-deep>.el-tree-node:after {
border-color: transparent;
}
//指引线上的横线
::v-deep .el-tree-node:after {
content: "";
left: -13px;
top: 17px;
position: absolute;
border-width: 1px;
width: 12px;
height: 1px;
border-top: 1px solid #000;
z-index: 0;
}
//文字换行，图标顶部对齐
::v-deep .el-tree-node__content {
height: auto;
align-items: flex-start;
padding-top: 5px;
padding-left: 0 !important;
// margin-left: 12px;
}
//让文字顶部有点距离
::v-deep .el-tree-node__label {
padding-top: 6px;
}
//选中时的样式
::v-deep .is-current>.el-tree-node__content .el-tree-node__label {
color: blue;
}
拓展：:first-child :nth-child last-child nth-of-type nth-last-of-type 使用区别
:first-child，代表选择器匹配属于其父元素的第 1 个子元素；
p:nth-child(1){background-color:#C00;}
:last-child 代表选择器匹配属于其父元素的最后一个子元素
:nth-child(odd) 代表选择器匹配属于其父元素的1、3、5、7……奇数子元素
CSS3 :nth-of-type(n)、:nth-of-type(odd)、:nth-of-type(even)、:nth-of-type(3n+b)选择器
代表规定属于其父元素的第二个 p 元素的每个 p：
.container p:nth-of-type(odd) {}
:nth-of-type 是指父级下p元素这一类的 奇数
.container p:nth-last-of-type(2){}
.t123 p:nth-child(odd){}
查找 t123 下的奇数，如果是p 则执行
.container p:nth-child(1){}
查找container 第一个元素是不是p, 如果是执行xx
：before等价::before
div:before 给div 添加before
div :before 是给 div的每个子元素、子元素的子元素添加before
