<div class="dir-tree">
<el-scrollbar style="height:100%">
<el-tree ...>
</el-tree>
</el-scrollbar>
</div>
- 设置外层父级div宽高
- 设置el-scrollbar样式
- 设置el-tree样式
.dir-tree {
width: 360px;
height: 800px;
}
.el-tree {
min-width: 100%;
display: inline-block !important;
}
.el-scrollbar .el-scrollbar__wrap {
overflow-x: hidden;
}
虚线样式记录一下:
.file-dir .el-select {
width: 100%;
}
.file-dir .el-tree-node {
position: relative;
padding-left: 16px;
background: #F5F9FD;
color: #18497F;
}
.file-dir .el-tree-node__children {
padding-left: 16px;
}
.file-dir .el-tree-node:before {
content: "";
height: 100%;
width: 1px;
position: absolute;
left: -3px;
top: -26px;
border-width: 1px;
border-left: 1px dotted #c0c4cc;
}
.file-dir .el-tree-node:last-child:before {
height: 38px;
}
.file-dir .el-tree-node:after {
content: "";
width: 24px;
height: 20px;
position: absolute;
left: -3px;
top: 12px;
border-width: 1px;
border-top: 1px dotted #c0c4cc;
}
/* 横方向 */
.file-dir .tree>.el-tree-node:after {
border-top: none;
padding-left: 0px;
}
/* 竖方向 */
.file-dir .tree>.el-tree-node:before {
border-left: none;
padding-left: 0px
}
.file-dir .tree>.el-tree-node {
padding-left: 0px;
}
.file-dir .el-tree-node__expand-icon {
font-size: 16px;
}
.file-dir .is-leaf {
color: transparent;
}
.file-dir .is-current {
color: #FD5B02;
}
.file-dir .el-icon-caret-right:before {
font-family: "iconfont" !important;
font-size: 18px;
font-style: normal;
content: "\e6cb" !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.file-dir .expanded:before {
font-family: "iconfont" !important;
font-size: 18px;
font-style: normal;
content: "\e6cc" !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.file-dir .is-leaf {
width: 0px;
}
.file-dir .el-tree .expanded {
-webkit-transform: rotate(0deg) !important;
transform: rotate(0deg) !important;
}
.file-dir .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #f5f9fd;
}
.file-dir .el-tree-node__content{
padding-left: 0 !important;
}