用element的el-tree树时,展开收缩的数据当数据量大时就会显示的杂乱,不容易查看,所以希望是能像zTree一样支持有指引线。
重点就是需要在el-tree标签上添加class="treeLine"
css
.treeLine {
::v-deep .el-tree-node {
position: relative;
padding-left: 16px;
}
::v-deep .el-tree-node__children {
padding-left: 16px;
}
// 竖线
::v-deep .el-tree-node::before {
content: '';
height: 100%;
width: 1px;
position: absolute;
left: -3px;
top: -26px;
border-width: 1px;
border-left: 1px dashed #ccc;
}
::v-deep .el-tree-node:last-child::before {
height: 38px;
}
// 横线
::v-deep .el-tree-node::after {
content: '';
width: 24px;
height: 20px;
position: absolute;
left: -3px;
top: 12px;
border-width: 1px;
border-top: 1px dashed #ccc;
}
& > ::v-deep .el-tree-node::after {
border-top: none;
}
& > ::v-deep .el-tree-node::before {
border-left: none;
}
::v-deep .el-tree-node__expand-icon {
font-size: 16px;
::v-deep &.is-leaf {
color: transparent;
}
}
}