elementUI树形组件添加连接线（附效果图）

本文主要是介绍elementUI树形组件添加连接线（附效果图），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看效果图：

<div class="tree-container"><el-tree:data="treeData2":highlight-current="true"node-key="lc_id"default-expand-alldraggable:allow-drop="allowDrop"@node-drag-end="handleDragEnd"@node-click="handleNodeClick"class="tree"ref="tree"><template v-slot:default="{ node }"><div class="flex-tree"><div><el-icon v-show="node.data.children && node.data.children.length"><l-calendar /></el-icon>{{ node.label }}</div><div v-show="node.data.lc_id !== 'container'"><el-icon @click.stop="delNode(node)"><l-delete /></el-icon></div></div></template></el-tree></div>


/* 树形结构节点添加连线 css */
.tree .el-tree-node {position: relative;// padding-left: 16px;
}.tree .el-tree-node__children {padding-left: 16px;
}.tree .el-tree-node :last-child:before {height: 38px;
}.tree .el-tree > .el-tree-node:before {border-left: none;
}
.tree-container .el-tree > .el-tree-node:after {border-top: none;
}.tree .el-tree-node__children .el-tree-node:before {content: "";left: -4px;position: absolute;right: auto;border-width: 1px;
}.tree .el-tree-node:after {content: "";left: -4px;position: absolute;right: auto;border-width: 1px;
}
.tree .el-tree-node__expand-icon.is-leaf {display: none;
}.tree .el-tree-node:before {border-left: 1px dashed #dddddd;bottom: 0px;height: 100%;top: -26px;width: 1px;
}.tree .el-tree-node:after {border-top: 1px dashed #dddddd;height: 20px;top: 12px;width: 24px;
}
.tree .custom-tree-node {padding-left: 10px;
}