vue中elementUI的tree组件的使用（加线条加自定义图标）

后台管理系统是从layui过来的，所以总是觉得elementUI的tree组件线条没了不好看，
####第一中效果有线条

html
要在tree组件的直系父集上面加class名字tree-container，在自己加tree的class

 <div class="tree-container">
        <el-tree
          ref="tree"
          class="tree filter-tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          default-expand-all
        >
          <!-- default-expand-all -->
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span :dataType="data.type">
              <!-- <i class="iconfont iconic_services"></i> -->
              {
  { node.label }}
            </span>
          </span>
        </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 {