当前位置：首页 > news >正文

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

news 2025/8/13 5:45:35

如图，禁止废话，直接上代码
在这里插入图片描述

            <div class="bg-white h-full common-border-radius" style="padding: 20px 20px 20px 0; width: 400px; min-width: 300px; overflow: scroll;"><el-treev-loading="treeLoading"class="tree-contianer":data="treeData"default-expand-allnode-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-buttontype="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-buttontype="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-buttontype="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>

<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>