image.png

1、添加虛線代碼

為el-tree添加這兩個(gè)屬性

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; // 縮進(jìn)量
        }
        .el-tree-node__children {
            padding-left: 16px; // 縮進(jìn)量
        }

        // 豎線
        .el-tree-node::before {
            content: '';
            height: 100%;
            width: 1px;
            position: absolute;
            left: -3px;
            top: -26px;
            border-width: 1px;
            border-left: 1px dashed #52627c;
        }
        // 當(dāng)前層最后一個(gè)節(jié)點(diǎn)的豎線高度固定
        .el-tree-node:last-child::before {
            height: 38px; // 可以自己調(diào)節(jié)到合適數(shù)值
        }

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

        // 去掉最頂層的虛線，放最下面樣式才不會(huì)被上面的覆蓋了
        & > .el-tree-node::after {
            border-top: none;
        }
        & > .el-tree-node::before {
            border-left: none;
        }

        // 展開關(guān)閉的icon
        .el-tree-node__expand-icon {
            font-size: 16px;
            // 葉子節(jié)點(diǎn)（無(wú)子節(jié)點(diǎn)）
            &.is-leaf {
                color: transparent;
                // display: none; // 也可以去掉
            }
        }
    }
}

2、添加圖標(biāo)代碼

圖標(biāo)可以是elementUi的icon，也可以直接引入iconfont的圖標(biāo)

                      <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說(shuō)明為父節(jié)點(diǎn)，圖標(biāo)為 icon-weizhidingwei-->
                                <span
                                    v-if="data.parentId == 0"
                                    class="icon-weizhidingwei"
                                >
                                </span>
                                <!-- 否則為子節(jié)點(diǎn) ，圖標(biāo)為 icon-weizhi-->
                                <span
                                    v-else
                                    class="icon-weizhi"
                                    style="margin-right: 3px"
                                ></span>
                                <span>{{ node.label }}</span>
                            </span>
                        </el-tree>

除此之外還可以在treeData中配置icon屬性，屬性值為icon的名稱，渲染不同圖標(biāo)
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: '一級(jí) 1',
                    icon:'el-icon-success',
                    children: [{
                        id: 4,
                        label: '二級(jí) 1-1',
                        children: [{
                            id: 9,
                            label: '三級(jí) 1-1-1',
                            icon: 'el-icon-info'
                        }, {
                            id: 10,
                            label: '三級(jí) 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一級(jí) 2',
                    children: [{
                        id: 5,
                        label: '二級(jí) 2-1',
                    }, {
                        id: 6,
                        label: '二級(jí) 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一級(jí) 3',
                    children: [{
                        id: 7,
                        label: '二級(jí) 3-1'
                    }, {
                        id: 8,
                        label: '二級(jí) 3-2'
                    }]
                }]

圖標(biāo)樣式微調(diào)

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