el-tree增加指示线(同级增加连接)

el-tree增加指示线后效果

项目中使用less（样式嵌套、并定义一些变量），将class = ‘tree_container’ 放在包裹el-tree容器上即可，可以写一个公共样式文件引入，然后就可全局使用。

// el-tree指示线样式
.tree_container {
    .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 solid #e6e6e6;
        bottom: 0px;
        height: 100%;
        top: -22px;
        width: 1px;
    }
    .el-tree-node:after {
        border-top: 1px solid #e6e6e6;
        height: 20px;
        top: 16px;
        width: 24px;
    }
    .el-tree-node__content {
        padding-left: 10px !important;
    }
}