el-tree添加引导线 更改icon

前言

在el-tree基础上更改
添加引导线
更改icon （小三角 变换成 方形+ 方形- ）

正文

提示：以下是本篇文章正文内容，下面案例可供参考

效果图

代码
在template里面

<el-tree class="tree-line" :indent="0" :data="TreeData" show-checkbox node-key="id" :props="defaultProps"  /> 

在css里面
添加引导线的

::v-deep .tree-line {
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .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 #52627c;
  }
  // 当前层最后一个节点的竖线高度固定
  .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 #52627c;
  }

  // 去掉最顶层的虚线，主要是不注释 位置不对等 丑
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶子节点（无子节点）  
    &.is-leaf {
      color: transparent;
      display: none; //默认注释掉 会有一点空白，丑
    }
  }
}

替换 icon图片的

.el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
  }
  .el-icon-caret-right:before {
    /* // 加号图片 */
    content: url("../../assets/img/systemAuth/roleMag/+.png") !important;
    font-size: 16px;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 16px;
    background-size: 16px;
  }
  .expanded:before {
    /* // 减号图片 */
    content: url("../../assets/img/systemAuth/roleMag/-.png") !important;
    font-size: 16px;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 16px;
    background-size: 16px;
  }
  .is-leaf.el-tree-node__expand-icon.el-icon-caret-right:before {
    content: "" !important;
    font-size: 16px;
  }

注意 我这边.png 下载时是 16px 的，大的影响效果展示

Ending…