先看效果图:
<div class="tree-container">
<el-tree
:data="treeData2"
:highlight-current="true"
node-key="lc_id"
default-expand-all
draggable
: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;
}