element-tree组件连接线以及懒加载

    
    
      
        
          
        
        
          
        
        
          {{ data.fvAreaName }}
        
    

default-expand-all为节点数默认全部展开，懒加载适用

利用css配置tree节点虚线

// 点击选中的tree节点样式
.organization_configuration {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 设置颜色
    color: #409eff; // 节点的字体颜色
    background: transparent;
  }
}

// tree连接线
.tree-line {
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__content {
    margin-top: 10px;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -1px;
    top: -22px;
    border-width: 1px;
    border-left: 1px dashed #c0c4cc;
  }

  .el-tree-node:last-child::before {
    height: 33px;
  }

  .el-tree-node::after {
    content: '';
    width: 30px;
    height: 20px;
    position: absolute;
    left: 1px;
    top: 11px;
    border-width: 1px;
    border-top: 1px dashed #c0c4cc;
  }

  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }

  .el-tree-node__expand-icon {
    font-size: 18px;
    // color: #000;
    &.is-leaf {
      color: transparent;
      // display: none;
    }
  }
}

设置tree节点的连接线需要在tree组件上配置 :index = 0 ; 初始化节点的距离，否则节点的连接线位置会偏移，配置完成后使用上面的css样式即可，before伪元素为Y轴、after伪元素为X轴连接线。

另外
tree点击激活和失焦后的样式调整，如果上面的方法失效可以用这个

  /* 改变被点击节点背景颜色，字体颜色 */
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #4a9de7 !important;
    color: #fff !important;
  }
  /*节点失焦时的背景颜色*/
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
    background-color: #4a9de7 !important;
    color: #fff !important;
  }