ElementUI 中 Tree 树形控件 添加自定义样式 虚线及图标样式

修改前样式

修改后样式如图：

<el-tree :data="data" :props="defaultProps" class="tree-line" icon-class="el-icon-plus" @node-click="handleNodeClick"></el-tree>

<style lang="scss" type="text/css" scoped>

.tree-default{
  >>> .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  >>> .el-tree-node__content {
      height: 32px;
      padding-left: 0px !important;
  }
  >>> .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }

  // 竖线
  >>> .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #B5BCC6;
  }
  // 当前层最后一个节点的竖线高度固定
  >>> .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  >>> .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #B5BCC6;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  >>> & > .el-tree-node::after {
    border-top: none;
  }
  >>> & > .el-tree-node::before {
    border-left: none;
  }
    
  // 展开关闭的icon
  >>> .el-tree-node__expand-icon{
    font-size: 5px;
    background: #374D6C;
    color: #fff;
    margin: 5px;
    padding: 2px;
    // 叶子节点（无子节点）
    &.is-leaf{
        padding-left: 5px;
      display: none;
      & +.el-tree-node__label{
          margin-left: 10px;
      }
      
    }
  }
}

</style>