【element树组件】el-tree实现连接线及hover编辑效果

如图，禁止废话，直接上代码

1. 实现树组件连接线展示
2. 编辑项hover浮现
3. 树组件超出展示省略号。。。
4. 超出部分显示el-tooltip效果
   

            <div class="bg-white h-full common-border-radius" style="padding: 20px 20px 20px 0; width: 400px; min-width: 300px; overflow: scroll;">
                <el-tree
                    v-loading="treeLoading"
                    class="tree-contianer"
                    :data="treeData"
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    highlight-current
                    :indent="0"
                    :expand-on-click-node="false"
                    :props="defaultProps"
                    @node-click="(data, node) => handleTreeNodeClick(data, node)"
                >
                    <span 
                        class="custom-tree-node" 
                        slot-scope="{ node, data }" 
                    >
                    <el-tooltip effect="dark" :disabled="!data.showTitle" :content="data.showTitle ? node.label : ''" placement="top">
                        <span style="font-size: 14px;" @mouseenter="el => handleMouse(el, data)">{{ node.label }}</span>
                    </el-tooltip>
                    <span class="tree-node-opt">
                        <el-tooltip class="item" effect="dark" :content="$t('common.edit')" placement="top">
                            <el-button
                                type="text"
                                size="mini"
                                @click.prevent.stop="() => handleEditDept(data)"
                                icon="el-icon-edit"
                            >
                            </el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('common.delete')" placement="top">
                            <el-button
                                type="text"
                                size="mini"
                                @click.prevent.stop="() => handleDelDept(data)"
                                icon="el-icon-delete"
                            >
                            </el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('common.add')" placement="top">
                            <el-button
                                type="text"
                                size="mini"
								:disabled="node.level > 6"
                                @click.prevent.stop="() => handleAddDept(data)"
                                icon="el-icon-plus"
                            >
                            </el-button>
                        </el-tooltip>
                    </span>
                </span>
                </el-tree>
            </div>

        handleMouse(el, data) {
            const { target } = el
            const flag =  target?.scrollWidth > target?.clientWidth
            if ([null, undefined].includes(data.showTitle)) {
                this.$set(data, 'showTitle', flag)
            } else {
                data.showTitle = flag
            }
        },

<style lang="scss" scoped>
.orgManagement {
    .custom-tree-node {
        font-size: 14px;
        line-height: 28px;
        padding-right: 8px;

        width:100%;
        display:grid;
        grid-template-columns: auto min-content;
        overflow: hidden;
    }
    .custom-tree-node > span{
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>

<style lang="scss">
.tree-contianer {
	/* 覆盖 el-tree 的默认样式 */
	.el-tree-node__content:hover {
		.el-button--text {
			color: #2F3133;
		}
	}
	.tree-node-opt {
		margin: 0 0 0 10px;
		.el-button--text {
			color: #dddddd;
		}
	}
    .el-tree-node {
        position: relative;
        padding-left: 16px;
        &::before {
            content: '';
            width: 1px;
            height: 100%;
            border-left: 1px solid #eeeeee;
            position: absolute;
            left: -4px;
            top: -26px;
        }
        &::after {
            content: '';
            width: 20px;
            height: 20px;
            border-top: 1px solid #eeeeee;
            position: absolute;
            top: 12px;
            left: -4px;
        }
        &:last-child:before {
            height: 38px;
        }
        .el-tree-node__children {
            padding-left: 16px;
        }
        .el-tree-node__expand-icon.is-leaf {
            display: none;
        }
    }
    
    & > .el-tree-node:before {
        border-left: none;
    }
    & > .el-tree-node:after {
        border-top: none;
    }
}
</style>