elementui tree节点高度自适应连线各个节点

 

 tree.vue文件

<template>
  <div>
    <el-tree
      ref="treeRef"
      :data="treeData"
      node-key="atlasId"
      :show-checkbox="showCheckbox"
      :filter-node-method="filterNode"
      :default-expand-all="expandAll"
      :default-expanded-keys="defaultExpandedKeys"
      :highlight-current="highlight"
      :current-node-key="currentNodeKey"
      :expand-on-click-node="expandClick"
      :props="defaultProps"
      :default-checked-keys="defaultCheckedKeys"
      :class="{ 'show-tooltip-disables': disabledDown }"
      :indent="indent"
      @node-click="handleTreeNode"
      @check-change="handleCheckChange"
      @check="handleNodeCheck"
    >
      <span :id="data.atlasId" slot-scope="{ node, data }" class="custom-tree-node">
        <el-popover
          placement="top"
          width="200"
          trigger="hover"
          :content="node.label"
          :open-delay="openDelay"
          :disabled="disPopover"
          :visible-arrow="false"
        >
          <!-- 名称 -->
          <span slot="reference" class="custom-tree-left">
            {{ node.label }}
          </span>
        </el-popover>
        <span v-if="data.children && data.children.length > 0 && node.expanded && showLine" class="custom-tree-vertical" />
      </span>
    </el-tree>
  </div>
</template>

indent设置成0，主要是为了自适应高度必须要custom-tree-vertical这个sapn 来凑高度

css文件

.custom-tree-vertical {
  display: inline-block;
  position: absolute;
  top: 11px;
  left: -20px;
  width: 0px;
  height: 164%;
  border: 1px solid #CDD9D5;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  /* 确保边框不影响元素的交互 */
}

/deep/.custom-tree-node {
  display: inline-block;
  font-size: 14px;
  margin: 5px;
  padding-right: 10px;
  display: flex;
  align-items: flex-start;
  /* 确保子元素从顶部对齐 */
  position: relative;

  .custom-tree-left {
    // width: 192px;
    display: inline-block;
    white-space: normal;
    line-height: 20px;
    text-align: left;
    text-indent: 0;
  }
}


/deep/.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

/deep/.el-tree .el-icon-caret-right:before {
  content: '';
  background: url('~@/assets/images/easyDevelop/addIcon.png') no-repeat;
  background-size: 16px;
  font-size: 16px;
  display: block;
  width: 16px;
  height: 16px;
}

/deep/.is-leaf.el-icon-caret-right::before {
  visibility: hidden;
}

/deep/.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: '';
  background: url('~@/assets/images/easyDevelop/minusIcon.png') no-repeat;
  background-size: 16px;
  font-size: 16px;
  display: block;
  width: 16px;
  height: 16px;
}

/* //没有子节点 */
/deep/.el-tree .el-tree-node__expand-icon.is-leaf::before {
  content: '';
  background: url('~@/assets/images/easyDevelop/minusIcon.png') no-repeat;
  background-size: 16px;
  font-size: 16px;
  display: block;
  width: 16px;
  height: 16px;
}

/deep/.el-tree {
  background: #F6FCFB;
}

/deep/.el-tree .el-tree-node.is-focusable>.el-tree-node__content {
  background: #F6FCFB;
}

/deep/.el-tree>.el-tree-node:after {
  border-top: none;
}

/deep/.el-tree-node {
  position: relative;
  padding-left: 16px;
}

//节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
/deep/.el-tree-node__expand-icon.is-leaf {
  display: none;
}

/deep/.el-tree-node__children {
  padding-left: 16px;
}

/deep/.el-tree-node :last-child:before {
  height: 25px; //42
}

/deep/.el-tree>.el-tree-node:before {
  border-left: none;
}

/deep/.el-tree>.el-tree-node:after {
  border-top: none;
}

/deep/.el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

/deep/.el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

/deep/.el-tree-node:before {
  border-left: 1px solid #CDD9D5;
  bottom: 0px;
  height: 100%;
  top: -10px; //-18
  width: 1px;
  left: -3px;
}

/deep/.el-tree-node:after {
  border-top: 1px solid #CDD9D5;
  height: 20px;
  top: 15px; //24
  width: 24px;
}

/deep/.el-tree-node__content {
  height: 100%;
  align-items: start;
}