基于elementui带连接线的树形控件

因工作需求，需要要书写一个基于elementUI带连接线的树形控件，并且文字部分为按钮可以点击切换状态。因为自己也找了很久没有特别合适的组件。所以将自己写的分享一下。话不说多 上图 。图下就是我所书写的大概样式 。

<template>
    <div style="display:flex;justify-content: flex-start">
        <div class="waitQues" v-for="item in data">
            <el-tree
                    :data="item.children"
                    ref="tree1"
                    :props="defaultProps"
                    current-node-key="1"
                    node-key="id"
                    @node-click="nodeClick"
                    :expand-on-click-node-text="false"
            >
                <div class="custom-tree-node" slot-scope="{ node, data}">
                    <div>
            <span v-if="!data.children||data.id=='0'||data.children.length==0">
                <span class="btn-span" @click.stop="clickBtn(node.data)">{{ node.label }}</span>
              <span class="examine">
              </span>
            </span>
            <span v-else style="position: relative;">
              <img
                      :src="data.open ? defaultOpen  : defaultClose"
                      alt
                      style="position: absolute;left: -19px; top: 0px; z-index: 999; "
              />
                            <!-- 这里的定位会根据位置的不同需要做细微的调整 op: 4px-->
              <span class="btn-span" @click.stop="clickBtn(node.data)">{{ node.label }}</span>
            </span>
                    </div>
                </div>
            </el-tree>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ids:[],
                defaultOpen: require("@/assets/img/add.png"),
                defaultClose: require("@/assets/img/delete.png"),

                defaultProps: {
                    children: "children",
                    label: "label"
                },
                data: [
                    {
                        "label":"基础信息",
                        "id":"201001",
                        "open":"false",
                        "children":[
                            {
                                "children":[
                                    {
                                        "id":"1",
                                        "label":"aa",
                                        "open":"false",
                                        "children":[
                                            {
                                                "id":"2",
                                                "label":"bb",
                                                "open":"false",
                                                "children":[
                                                    {
                                                        "id":"3",
                                                        "label":"cc",
                                                        "open":"false",
                                                        "children":[]
                                                    }]
                                            }]
                                    },
                                    {
                                        "id":"14d32f323c3f393e7e7dc11c5c76ea36",
                                        "label":"王企鹅",
                                        "open":"false",
                                        "children":[]
                                    },
                                    {
                                        "id":"1670bff29aa91b9a8d0aa86c9b6b195b",
                                        "label":"测试3",
                                        "open":"false",
                                        "children":[]
                                    },
                                    {
                                        "id":"4673c6eee0c6300e2aca1294c4543c23",
                                        "label":"我是",
                                        "open":"false",
                                        "children":[]
                                    },
                                    {
                                        "id":"743bb731f861436c001997a2cdf2c97c",
                                        "label":"熊",
                                        "open":"false",
                                        "children":[]
                                    }
                                ],
                                "label":"基础信息",
                                "id":"201001",
                                "open":"false"
                            },
                        ]
                    },
                    {
                        "children":[
                            {
                                "children":[
                                    {
                                        "id":"12",
                                        "label":"aa",
                                        "open":"false",
                                        "children":[
                                            {
                                                "id":"12311",
                                                "label":"bb",
                                                "open":"false",
                                                "children":[
                                                    {
                                                        "id":"1231",
                                                        "label":"cc",
                                                        "open":"false"
                                                    }]
                                            }]
                                    },
                                    {
                                        "id":"14d32f323c3f393e7e7dc11c5c76ea36",
                                        "label":"王企鹅",
                                        "open":"false"
                                    },
                                    {
                                        "id":"1670bff29aa91b9a8d0aa86c9b6b195b",
                                        "label":"测试3",
                                        "open":"false"
                                    },
                                    {
                                        "id":"4673c6eee0c6300e2aca1294c4543c23",
                                        "label":"我是",
                                        "open":"false"
                                    },
                                    {
                                        "id":"743bb731f861436c001997a2cdf2c97c",
                                        "label":"熊",
                                        "open":"false"
                                    }
                                ],
                                "label":"基础信息",
                                "id":201001,
                                "open":"false"
                            },
                        ]
                    },
                    {
                        "children":[
                            {
                                "children":[
                                    {
                                        "id":"12",
                                        "label":"aa",
                                        "open":"false",
                                        "children":[
                                            {
                                                "id":"12311",
                                                "label":"bb",
                                                "open":"false",
                                                "children":[
                                                    {
                                                        "id":"1231",
                                                        "label":"cc",
                                                        "open":"false"
                                                    }]
                                            }]
                                    },
                                    {
                                        "id":"14d32f323c3f393e7e7dc11c5c76ea36",
                                        "label":"王企鹅",
                                        "open":"false"
                                    },
                                    {
                                        "id":"1670bff29aa91b9a8d0aa86c9b6b195b",
                                        "label":"测试3",
                                        "open":"false"
                                    },
                                    {
                                        "id":"4673c6eee0c6300e2aca1294c4543c23",
                                        "label":"我是",
                                        "open":"false"
                                    },
                                    {
                                        "id":"743bb731f861436c001997a2cdf2c97c",
                                        "label":"熊",
                                        "open":"false"
                                    }
                                ],
                                "label":"基础信息",
                                "id":201001,
                                "open":"false"
                            },
                        ]
                    },
                    {
                        "children":[
                            {
                                "children":[
                                    {
                                        "id":"12",
                                        "label":"aa",
                                        "open":"false",
                                        "children":[
                                            {
                                                "id":"12311",
                                                "label":"bb",
                                                "open":"false",
                                                "children":[
                                                    {
                                                        "id":"1231",
                                                        "label":"cc",
                                                        "open":"false"
                                                    }]
                                            }]
                                    },
                                    {
                                        "id":"14d32f323c3f393e7e7dc11c5c76ea36",
                                        "label":"王企鹅",
                                        "open":"false"
                                    },
                                    {
                                        "id":"1670bff29aa91b9a8d0aa86c9b6b195b",
                                        "label":"测试3",
                                        "open":"false"
                                    },
                                    {
                                        "id":"4673c6eee0c6300e2aca1294c4543c23",
                                        "label":"我是",
                                        "open":"false"
                                    },
                                    {
                                        "id":"743bb731f861436c001997a2cdf2c97c",
                                        "label":"熊",
                                        "open":"false"
                                    }
                                ],
                                "label":"基础信息",
                                "id":201001,
                                "open":"false"
                            },
                        ]
                    },
                ]
            };
        },
        props: {
            checkedCities3: {
                type: Object,
                required: true,
            },
        },
        methods: {
            clickBtn(node) {
                this.ids=[]
                this.ids.push(node.id)
                // 递归获取子节点id
                if (node.children.length>0){
                    this.getAllIds(node.children)
                }
                console.log(this.ids)
                console.log(this.checkedCities3)
                // 如果id权限数组包含当前点击节点的id，则移除当前id
                // if (this.checkedCities3.include(node.id)){
                //
                // }
            },
            // 递归获取子节点id
            getAllIds(nodeArray) {
                nodeArray.forEach((node) => {
                    this.ids.push(node.id);
                    if (node.children.length > 0) {
                        this.getAllIds(node.children);
                    }
                });
                return this.ids;
            },
            nodeClick(data) {
                data.open = !data.open;
            },
        }
    };
</script>
<style lang="scss" scoped>
    .waitQues {
        width: 280px;
        border-radius: 4px;
        ::v-deep .el-tree {
            margin: 20px 0 20px 50px;
            .el-tree-node {
                position: relative;
                padding-left: 10px;
            }
            .el-tree-node__children {
                padding-left: 10px;
            }
            .el-tree-node :last-child:before {
                height: 40px;
            }
            .el-tree > .el-tree-node:before {
                border-left: none;
            }
            .el-tree > .el-tree-node:after {
                border-top: none;
            }
            .el-tree-node:before,
            .el-tree-node:after {
                content: "";
                left: -4px;
                position: absolute;
                right: auto;
                border-width: 10px;
            }
            .tree :first-child .el-tree-node:before {
                border-left: none;
            }
            .el-tree-node:before {
                border-left: 1px solid #e3e3e3;
                background-clip: padding-box; /* 设置background-clip为padding-box */
                padding: 10px; /* 设置虚线边框的间距 */
                bottom: 0px;
                height: 100%;
                top: -45px;
                width: 1px;
            }
            .el-tree-node:after {
                border-top: 1px solid #e3e3e3;
                height: 20px;
                top: 14px;
                width: 26px;
            }
            .el-tree-node__expand-icon.is-leaf {
                width: 8px;
            }
            .el-tree-node__content > .el-tree-node__expand-icon {
                display: none;
                // visibility: hidden;
            }
            .el-tree-node__content {
                background-color: transparent;
                line-height: 30px;
                height: 30px;
                padding-left: 22px !important;
                margin-top: 8px;
                margin-bottom: 8px;
                &:hover .examine {
                    display: block;
                    display: inline-block;
                }
            }
        }
        ::v-deep .el-tree > div {
            &::before {
                display: none;
            }
            &::after {
                display: none;
            }
        }
        ::v-deep .el-tree-node__content:hover {
            background-color: transparent;
        }
        ::v-deep .el-tree-node__content:active {
            background-color: transparent;
        }
    }
    /*.custom-tree-node{*/
    /*}*/
    .btn-span{

        border: 1px solid rgba(64, 158, 255, 1);
        color: #409eff;
        border-radius: 4px;
        background-color: rgba(64, 158, 255, .1);
        padding: 8px;
    }
</style>