simulation-front/src/views/sceneLibrary/components/elTree.vue

<template>
    <div class="treePanel">
        <el-tree
            ref="tree"
            :data="data"
            node-key="id"
            :props="defaultProps"
            :default-expand-all="true"
            :expand-on-click-node="false"
        ></el-tree>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "Tree", //
    components: {},
    data() {
        return {
            // data1: [
            //     {
            //         label: "一级 3",
            //         children: [
            //             {
            //                 label: "二级 3-1",
            //                 children: [
            //                     {
            //                         label: "三级 3-1-1",
            //                     },
            //                     {
            //                         label: "三级 3-1-2",
            //                     },
            //                 ],
            //             },
            //             {
            //                 label: "二级 3-2",
            //                 children: [
            //                     {
            //                         label: "三级 3-2-1",
            //                         children: [
            //                             {
            //                                 label: "四级 3-2-1四级 3-2-1四级 3-2-1四级 3-2-1",
            //                             },
            //                             {
            //                                 label: "四级 3-2-2",
            //                             },
            //                             {
            //                                 label: "四级 3-2-3",
            //                             },
            //                             {
            //                                 label: "四级 3-2-3",
            //                             },
            //                             {
            //                                 label: "四级 3-2-3",
            //                             },
            //                             {
            //                                 label: "四级 3-2-3",
            //                             },
            //                         ],
            //                     },
            //                     {
            //                         label: "三级 3-2-2",
            //                         children: [
            //                             {
            //                                 label: "四级 3-2-1",
            //                             },
            //                             {
            //                                 label: "四级 3-2-2",
            //                             },
            //                             {
            //                                 label: "四级 3-2-3",
            //                             },
            //                         ],
            //                     },
            //                     {
            //                         label: "三级 3-2-3",
            //                         children: [
            //                             {
            //                                 label: "四级 3-2-1",
            //                             },
            //                             {
            //                                 label: "四级 3-2-2",
            //                             },
            //                             {
            //                                 label: "四级 3-2-3",
            //                             },
            //                         ],
            //                     },
            //                 ],
            //             },
            //         ],
            //     },
            // ],
            defaultProps: {
                children: "children",
                label: "treeNode",
                disabled: "weightErr", // 用于权重的报错提示
            },
        };
    },

    props: {
        data: {
            type: Array,
            default: [],
        },
    },

    watch: {
        data(val) {
            if (val && val.length > 0) {
                this.domHandel();
            }
        },
    },

    methods: {
        domHandel() {
            this.$nextTick(() => {
                $(".el-tree-node__label").parent().next().each((i, item) => {
                    if (!$(item).html()) {
                        $(item)
                            .prev()
                            .find(".el-tree-node__label")
                            .addClass("noChildren");
                    }
                });

                $(
                    ".el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__label"
                ).addClass("noParent");


                $(".el-tree-node__children").each((i, item) => {
                    if($(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
                    .children('.el-tree-node__label').html()) {
                        let width = $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
                            .children('.el-tree-node__label').outerWidth();
                        let left = $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
                        .css('padding-left');

                        let prev = $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
                        .children('.el-tree-node__label').parent().parent().parent().prev()
                        .children('.el-tree-node__label').outerWidth();

                        let left1 = $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
                        .children('.el-tree-node__label').parent().parent().parent().prev()
                        .css('padding-left');

                        let cur = Math.min(width/2+parseFloat(left),prev/2+parseFloat(left1))
                        
                        let b = "<b style='width:"+cur+"px'></b>";

                        $(item).children('.el-tree-node').eq(0).children('.el-tree-node__content')
                            .children('.el-tree-node__label').before(b);



                        let len = $(item).children('.el-tree-node').length;

                        let width1 = $(item).children('.el-tree-node').eq(len-1).children('.el-tree-node__content')
                            .outerWidth();

                        let right = $(item).children('.el-tree-node').eq(len-1).children('.el-tree-node__content')
                            .css('padding-left');

                        let width2 = $(item).children('.el-tree-node').eq(len-1).children('.el-tree-node__content')
                        .children('.el-tree-node__label').outerWidth();

                        let i = "<i style='width:"+(width1-width2/2-parseFloat(right))+"px'></i>";

                        $(item).children('.el-tree-node').eq(len-1).children('.el-tree-node__content')
                            .children('.el-tree-node__label').before(i);
                    }
                });
            });
        },
    },

    mounted() {
        this.domHandel();
    },
};
</script>

<style lang='less' scoped>
.treePanel {
    display: inline-block;
    padding-right: 10px;
    overflow: auto;
}

/deep/ .el-tree {
    * {
        cursor: default;
    }

    .el-tree-node[aria-disabled=true] {
        color: inherit;
    }

    .el-tree-node[aria-disabled=true] > .el-tree-node__content {
        color: red;
    }

    .el-tree-node.is-expanded > .el-tree-node__children {
        display: flex;
        // justify-content: space-between;
    }

    .el-tree-node__expand-icon.expanded {
        display: none;
    }

    .el-tree-node .el-tree-node__content {
        position: relative;
        height: 60px;
        line-height: 60px;

        > b {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 6;
            width: 100%;
            height: 1px;
            border-top: 1px solid #ffffff;
        }

        > i {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 6;
            width: 100%;
            height: 1px;
            border-top: 1px solid #ffffff;
        }
    }

    .el-tree-node__label {
        position: relative;

        &:before {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            top: 0;
            width: 1px;
            height: 20px;
            border-left: 1px solid @themeColor;
        }

        &:after {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 1px;
            height: 20px;
            border-left: 1px solid @themeColor;
        }

        &.noParent:before,
        &.noChildren:after {
            display: none;
        }
    }

    .el-tree-node__children {
        position: relative;

        &:before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid @themeColor;
        }

    }

    .el-icon-caret-right {
        display: none;
    }
}
</style>