给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: