hac/src/styles/app/tree.scss

// 树的线样式
.tree-line {
    :deep(.el-tree-node) {
        position: relative;
        padding-left: 12px; // 缩进量
    }
    :deep(.el-tree-node__children) {
        padding-left: 12px; // 缩进量
    }
    // 竖线
    :deep(.el-tree-node::before) {
        content:"";
        height: 100%;
        width: 1px;
        position: absolute;
        left: 1px;
        top: 0;
        border-width: 1px;
        border-left: 2px dashed var(--el-color-primary);
    }
    // 当前层最后⼀个节点的竖线⾼度固定
    :deep(.el-tree-node:last-child::before) {
        height: 15px; // 可以⾃⼰调节到合适数值
    }
    // 横线
    :deep(.el-tree-node::after) {
        content:"";
        width: 16px;
        height: 20px;
        position: absolute;
        left: 2px;
        top: 12px;
        border-width: 1px;
        border-top: 2px dashed var(--el-color-primary);
    }
    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
    & > :deep(.el-tree-node::after) {
        border-top: none !important;
        border-top: 0 !important;
    }
    & > :deep(.el-tree-node::before) {
        border-left: none;
    }
    // 展开关闭的icon
    :deep(.el-tree-node__expand-icon) {
        font-size: 16px;
        &.is-leaf {
            color: transparent;
            font-size: 0px;
        }
    }
    :deep(.el-tree__empty-block) {
      min-width: 300px;

    }
}

.tree-line1 {
    :deep(.el-tree-node) {
        position: relative;
        padding-left: 12px; // 缩进量
        width: 100%;
    }
    :deep(.el-tree-node__children) {
        padding-left: 12px; // 缩进量
    }
    // 竖线
    :deep(.el-tree-node::before) {
        content:"";
        height: 100%;
        width: 1px;
        position: absolute;
        left: 1px;
        top: 0px;
        border-width: 1px;
        border-left: 2px dashed var(--el-color-primary);
    }
    // 当前层最后⼀个节点的竖线⾼度固定
    :deep(.el-tree-node:last-child::before){
        height: 15px; // 可以⾃⼰调节到合适数值
    }
    // 横线
    :deep(.el-tree-node::after) {
        content:"";
        width: 16px;
        height: 20px;
        position: absolute;
        left: 2px;
        top: 12px;
        border-width: 1px;
        border-top: 2px dashed var(--el-color-primary);
    }
    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
    & > :deep(.el-tree-node::after) {
        border-top: none !important;
        border-top: 0 !important;
    }
    & > :deep(.el-tree-node::before) {
        border-left: none;
    }
    // 展开关闭的icon
    :deep(.el-tree-node__expand-icon) {
        font-size: 16px;
        &.is-leaf {
            color: transparent;
            font-size: 0;
        }
    }
    :deep(.el-tree__empty-block) {
      min-width: 300px;
    }
}

//虚拟树
.hc-tree-node-v2.tree-line1 {
    :deep(.el-virtual-scrollbar) {
        right: -12px !important;
    }
    :deep(.el-tree-node) {
        padding-left: 0;
    }
    :deep(.el-tree-node:first-child::before) {
        border-left: none;
    }
    :deep(.el-tree-node:first-child::after) {
        border-top: none !important;
        border-top: 0 !important;
    }
    // 竖线
    :deep(.el-tree-node::before) {
        left: 12px;
    }
    // 横线
    :deep(.el-tree-node::after) {
        left: 14px;
    }
    :deep([class*='line-i-']) {
        position: relative;
        //竖线
        &::before {
            content:"";
            height: 26px;
            width: 1px;
            position: absolute;
            left: 12px;
            top: 0;
            border-width: 1px;
            border-left: 2px dashed var(--el-color-primary);
        }
        //横线
        &::after {
            content:"";
            width: 16px;
            height: 20px;
            position: absolute;
            left: 14px;
            top: 12px;
            border-width: 1px;
            border-top: 2px dashed var(--el-color-primary);
        }
    }
    //自动生成子级线条
    @for $i from 1 through 20 {
        //竖线
        :deep(.line-i-#{$i}::before) {
            left: #{(($i + 1) * 24) - 11}px;
        }
        //横线
        :deep(.line-i-#{$i}::after) {
            left: #{(($i + 1) * 24) - 9}px;
        }

        //消除非主要线条
        @if $i >= 3 {
            :deep(.el-tree-node[level="#{$i}"]) {
                &::after {
                    display: none;
                }
                @if $i >= 4 {
                    @for $x from 1 through ($i - 3) {
                        .line-i-#{$x}::after {
                            display: none;
                        }
                    }
                }
            }
        }
    }

}