修改前样式
修改后样式如图:
<el-tree :data="data" :props="defaultProps" class="tree-line" icon-class="el-icon-plus" @node-click="handleNodeClick"></el-tree>
<style lang="scss" type="text/css" scoped>
.tree-default{
>>> .el-tree-node {
position: relative;
padding-left: 16px; // 缩进量
}
>>> .el-tree-node__content {
height: 32px;
padding-left: 0px !important;
}
>>> .el-tree-node__children {
padding-left: 16px; // 缩进量
}
// 竖线
>>> .el-tree-node::before {
content: "";
height: 100%;
width: 1px;
position: absolute;
left: -3px;
top: -26px;
border-width: 1px;
border-left: 1px dashed #B5BCC6;
}
// 当前层最后一个节点的竖线高度固定
>>> .el-tree-node:last-child::before {
height: 38px; // 可以自己调节到合适数值
}
// 横线
>>> .el-tree-node::after {
content: "";
width: 24px;
height: 20px;
position: absolute;
left: -3px;
top: 12px;
border-width: 1px;
border-top: 1px dashed #B5BCC6;
}
// 去掉最顶层的虚线,放最下面样式才不会被上面的覆盖了
>>> & > .el-tree-node::after {
border-top: none;
}
>>> & > .el-tree-node::before {
border-left: none;
}
// 展开关闭的icon
>>> .el-tree-node__expand-icon{
font-size: 5px;
background: #374D6C;
color: #fff;
margin: 5px;
padding: 2px;
// 叶子节点(无子节点)
&.is-leaf{
padding-left: 5px;
display: none;
& +.el-tree-node__label{
margin-left: 10px;
}
}
}
}
</style>