element树样式的修改,可以参考一下,实现效果和代码有展示

有关树控件样式的修改,实现效果如下:

贴上html代码:

<div class="treegroup">
<div class="righttree">
// 一共有三个数并排展示,由于截图大小原因这个没有截出来,所以代码省略,跟下面的树一样的,一个掌握了,想要实现N多树都是一样的道理
</div>
<div class="righttree">
<el-tree
class="tree"
ref="operationstree"
:data="operationsTressdata"
default-expand-all
@node-click="handleNodeClick"
></el-tree>
</div>
<div class="righttree">
<el-tree
class="tree"
ref="commandstree"
:data="commandsTressdata"
default-expand-all
@node-click="handleNodeClick"
></el-tree>
</div>
</div>

贴上css样式,这里是重点
可以根据自己的需求来增加删改里面的样式

//权限树的样式
.treegroup {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-around;
.tree {
// flex:1;
padding: 0 60px;
}
}

.righttree {
display: flex;
flex-direction: column;
flex: 1;
}

/deep/ .el-tree > .el-tree-node:after {
border-top: none;
}

//  .tree /deep/ .el-tree-node__expand-icon.expanded {
//   display: none;
// }

// /deep/ .el-icon-caret-right:before {
//   //   display: none;
// }

/deep/ .el-tree-node__expand-icon.is-leaf {
display: none;
}

.tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}

.tree /deep/ .el-tree-node__children {
padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}

.tree /deep/ .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}

.tree /deep/ .el-tree-node__children .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 2px;
}

.tree /deep/ .el-tree-node__children .el-tree-node:before {
border-left: 2px dashed #ffd791;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
// z-index: 999;
// position: absolute;
}

.tree /deep/ .el-tree-node:after {
border-top: 2px dashed #ffd791;
height: 35px;
top: 10px;
width: 24px;
}

/deep/ .el-tree-node__children .el-tree-node__label {
flex: 1;
background-color: #fc9053;
color: #fff;
height: 25px;
line-height: 25px;
padding-left: 10px;
}

/deep/ .el-tree-node__content {
// margin-left: 25px;
margin-bottom: 8px;
}

/deep/ .el-tree-node__children .el-tree-node__content {
margin-left: 5px;
}

/deep/ .el-tree-node__children .el-tree-node__content {
padding-left: 0 !important;
}