给tree组件添加连接线

1.页面渲染

<template>
    <div class='tree-line'>
        <el-tree :data="data" :indent='0' :props="defaultProps" @node-click="handleNodeClick"> 
        </el-tree>
    </div>
</template>
<-- 注意：   ：indent='0'这一项设置一下，否则线跟节点之间会有很大的缝隙-->

2.写样式

// 给tree组件添加连接线
::v-deep .tree-line {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    // padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    // display: none;
  }
  .el-tree-node__children {
    // padding-left: 16px;
    padding-left: 10px;
  }

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

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

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

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

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

  .el-tree-node:before {
    border-left: 1px solid #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px solid #4386c6;
    height: 20px;
    top: 12px;
    // width: 24px;
    width: 8px;
  }
}

 这样的话其实一级文件上是有多余的线的，解决方式：在tree组件外加一个盒子定位到tree左上方，利用z-index遮罩住！

 https://zhuanlan.zhihu.com/p/149243311

附上链接！！！ 

标签：node,连接线,el,tree,1px,组件,border,left
来源： https://blog.csdn.net/yixiaojing527/article/details/121467273