vue+element树形结构节点添加连线

---

需求页面如下图所示

代码如下

1、template

<template>
    <div class="operation_box">
       <el-tree :data="data" node-key="label" class="tree" :props="defaultProps" :default-expanded-keys="['首页']">
       </el-tree>
    </div>
</template>

2、script

<script>
export default {
    data() {
        return {
            data: [{
                id: '1',
                label: '首页',
                children: [{
                    id: '1-1',
                    label: '党建头条',
                    children: [{
                        id: '1-1-1',
                        label: '中央声音'
                    }, {
                        id: '1-1-2',
                        label: '省委部署',
                    }, {
                        id: '1-1-3',
                        label: '组工动态',
                    }, {
                        id: '1-1-4',
                        label: '市县快讯',
                    }]
                }, {
                    id: '1-2',
                    label: '热点资讯',
                    children: [{
                        id: '1-2-1',
                        label: '中央声音'
                    }, {
                        id: '1-2-2',
                        label: '省委部署',
                    }, {
                        id: '1-2-3',
                        label: '组工动态',
                    }, {
                        id: '1-2-4',
                        label: '市县快讯',
                    }]
                }, {
                    id: '1-3',
                    label: '通知公告',
                    children: [{
                        id: '1-3-1',
                        label: '中央声音'
                    }, {
                        id: '1-3-2',
                        label: '省委部署',
                    }, {
                        id: '1-3-3',
                        label: '组工动态',
                    }, {
                        id: '1-3-4',
                        label: '市县快讯',
                    }]
                }, {
                    id: '1-4',
                    label: '党建工作',
                    children: [{
                        id: '1-4-1',
                        label: '中央声音'
                    }, {
                        id: '1-4-2',
                        label: '省委部署',
                    }, {
                        id: '1-4-3',
                        label: '组工动态',
                    }, {
                        id: '1-4-4',
                        label: '市县快讯',
                    }]
                }, {
                    id: '1-5',
                    label: '干部工作',
                    children: [{
                        id: '1-5-1',
                        label: '中央声音'
                    }, {
                        id: '1-5-2',
                        label: '省委部署',
                    }, {
                        id: '1-5-3',
                        label: '组工动态',
                    }, {
                        id: '1-5-4',
                        label: '市县快讯',
                    }]
                }, {
                    id: '1-6',
                    label: '人才工作',
                    children: [{
                        id: '1-6-1',
                        label: '中央声音'
                    }, {
                        id: '1-6-2',
                        label: '省委部署',
                    }, {
                        id: '1-6-3',
                        label: '组工动态',
                    }, {
                        id: '1-6-4',
                        label: '市县快讯',
                    }]
                }, {
                    id: '1-7',
                    label: '公务员工作',
                    children: [{
                        id: '1-2-1',
                        label: '中央声音'
                    }, {
                        id: '1-2-2',
                        label: '省委部署',
                    }, {
                        id: '1-2-3',
                        label: '组工动态',
                    }, {
                        id: '1-2-4',
                        label: '市县快讯',
                    }]
                }, {
                    id: '1-8',
                    label: '专题',
                    children: [{
                        id: '1-8-1',
                        label: '中央声音'
                    }, {
                        id: '1-8-2',
                        label: '省委部署',
                    }, {
                        id: '1-8-3',
                        label: '组工动态',
                    }, {
                        id: '1-8-4',
                        label: '市县快讯',
                    }]
                }]
            }],
            defaultProps: {
                // 用于修改节点指定标签的属性值
                children: 'children',
                label: 'label'
            }
        }
    },
}
</script>

3、css

.operation_box {

    /deep/ .tree {
        color: #595959;
        background: transparent;

        /* 树形结构节点添加连线 */
        .el-tree-node {
            position: relative;
            padding-left: 16px;

            .el-tree-node__content {
                height: 18px;
                padding-top: 16px;
                padding-left: 0 !important;

                .el-tree-node__expand-icon {
                    background: url(../../assets/img/operation/plus-square-outlined.png) no-repeat;
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    padding: 0;

                    &.expanded {
                        transform: none;
                        background: url(../../assets/img/operation/minus-square-outlined.png) no-repeat;
                    }

                    &::before {
                        content: '';
                    }

                    &.is-leaf {
                        display: none;
                    }
                }

                .el-tree-node__label {
                    margin-left: 10px;
                }

            }

            &:last-child:before {
                height: 50px;
            }

            &:before {
                content: "";
                left: -4px;
                position: absolute;
                right: auto;
                border-width: 1px;
                border-left: 1px solid #BBBBBB;
                bottom: 0px;
                height: 100%;
                top: -26px;
                width: 1px;
            }

            &:after {
                content: "";
                left: -4px;
                position: absolute;
                right: auto;
                border-width: 1px;
                border-top: 1px solid #BBBBBB;
                height: 20px;
                top: 24px;
                width: 18px;
            }

        }

        &>.el-tree-node {

            &>.el-tree-node__content{
                .el-tree-node__expand-icon{
                    background-image: url(../../assets/img/operation/folder-open-filled.png) !important;
                }
            }

            &::after {
                border: 0px solid;
            }
        }

        .el-tree-node__children {
            padding-left: 12px;
        }
    }
}