image.png

1、添加虚线代码

为el-tree添加这两个属性

class="tree-line"
:indent="0"

完整代码

<el-tree
    class="tree-line"
    :indent="0"
    :data="treeOption"
    :props="defaultProps"
    @node-click="getCurrentNode"
>

style

// 记得去掉scoped
<style lang="scss">
    .tree-line {
        .el-tree-node {
            position: relative;
            padding-left: 16px; // 缩进量
        }
        .el-tree-node__children {
            padding-left: 16px; // 缩进量
        }

        // 竖线
        .el-tree-node::before {
            content: '';
            height: 100%;
            width: 1px;
            position: absolute;
            left: -3px;
            top: -26px;
            border-width: 1px;
            border-left: 1px dashed #52627c;
        }
        // 当前层最后一个节点的竖线高度固定
        .el-tree-node:last-child::before {
            height: 38px; // 可以自己调节到合适数值
        }

        // 横线
        .el-tree-node::after {
            content: '';
            width: 24px;
            height: 20px;
            position: absolute;
            left: -3px;
            top: 12px;
            border-width: 1px;
            border-top: 1px dashed #52627c;
        }

        // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
        & > .el-tree-node::after {
            border-top: none;
        }
        & > .el-tree-node::before {
            border-left: none;
        }

        // 展开关闭的icon
        .el-tree-node__expand-icon {
            font-size: 16px;
            // 叶子节点（无子节点）
            &.is-leaf {
                color: transparent;
                // display: none; // 也可以去掉
            }
        }
    }
}

2、添加图标代码

图标可以是elementUi的icon，也可以直接引入iconfont的图标

                      <el-tree
                            class="tree-line"
                            :indent="0"
                            :data="treeOption"
                            :props="defaultProps"
                            @node-click="getCurrentNode"
                        >
                            <span
                                class="custom-tree-node"
                                slot-scope="{ node, data }"
                            >
                                <!-- parentId == 0说明为父节点，图标为 icon-weizhidingwei-->
                                <span
                                    v-if="data.parentId == 0"
                                    class="icon-weizhidingwei"
                                >
                                </span>
                                <!-- 否则为子节点 ，图标为 icon-weizhi-->
                                <span
                                    v-else
                                    class="icon-weizhi"
                                    style="margin-right: 3px"
                                ></span>
                                <span>{{ node.label }}</span>
                            </span>
                        </el-tree>

除此之外还可以在treeData中配置icon属性，属性值为icon的名称，渲染不同图标
html如下

               <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>
                        <i :class="data.icon">{{ node.label }}</i>
                    </span>              
                </span>

treeData如下

            treeData: [{
                    id: 1,
                    label: '一级 1',
                    icon:'el-icon-success',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1',
                            icon: 'el-icon-info'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1',
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2'
                    }]
                }]

图标样式微调

    .icon-weizhidingwei:before {
        margin-right: 10px;
        color: #409eff;
    }
    .icon-weizhi:before {
        margin-right: 10px;
        color: #409eff;
    }