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

先看效果图： 

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