el-tree大改造，自定义图标，树加线等

如图效果

。

 html：

    <el-tree
      :default-expanded-keys="defaultProps"
      v-loading="loading"
      id="tree"
      style="margin-top:20px"
      ref="tree"
      :data="data"
      node-key="id"
      class="tree-line content"
      :indent="0"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span style="display: flex; align-items: center;">
          <img src="@/icons/folderBlue.png" v-if="!data.children&&node.level!==1"  style="width: 28px;height: 28px;"/>
          <img src="@/icons/folderGreenOpen.png"  v-else-if="node.expanded&&node.level==1"  style="width: 35px;height: 35px;" @click="() => openTree(node, data)" />
          <img src="@/icons/folderBlueOpen.png"  v-else-if="node.expanded&&node.level!=1"  style="width: 28px;height: 28px;" @click="() => openTree(node, data)" />
          <img src="@/icons/folderBlue.png"  v-else-if="!node.expanded&&node.level!=1"  style="width: 28px;height: 28px;" @click="() => openTree(node, data)" />
          <img src="@/icons/folderGreen.png" v-else style="width: 35px;height: 35px;" @click="() => openTree(node, data)" />
          
        
          <span :style="fontSize(node,data)" :class="data.id==isChooseId?'nodeLabel-isChoose':'nodeLabel'" @click="()=>handleNodeClick(node, data)">{{ data.title }}</span>
        </span>
        <span class="custom-tree-node-button">
          <img src="@/icons/add.png" v-if="node.level!==3" style="width: 14px;height: 14px;" @click.stop="() => addNodes(node, data)"   /> 
          <img  src="@/icons/editor.png"  style="width: 14px;height: 14px;margin-left:10px" @click.stop="() => editNodes(node, data)"  /> 
          <img  src="@/icons/delete.png"  style="width: 14px;height: 16px;margin-left:10px" @click.stop="() => del(node, data)"  /> 
          <img  src="@/icons/stopUsedRed.png" v-if="data.state===1"  style="width: 14px;height: 14px;margin-left:10px" @click.stop="() => isUsed(node, data)"  />
          <img  src="@/icons/used.png" v-else  style="width: 14px;height: 14px;margin-left:10px" @click.stop="() => isUsed(node, data)"  />  
        </span>
      </span>
    </el-tree>

 

 js与scss，没有放上面新增删除等操作按钮的函数

      //过滤函数
      filterNode(value, data) {
        if (!value) return true;
        return data.title.indexOf(value) !== -1;
      },
      //选择的
      handleNodeClick(node, data){
        console.log(data) 

          this.isChooseId = data.id
          this.$emit('checkedKeys',{id:data.id,name:data.title,level:data.level,path:data.path})
        
      },
      // 每一级字体变小
      fontSize(node,data){
        return 'font-size:' + (18 -node.level*2) + 'px' 
      },
      //手动打开树节点
      openTree(node,data){
        // console.log(node);
        if(!node.expanded)this.defaultProps = [data.id]
        this.$refs.tree.store.nodesMap[data.id].expanded = !node.expanded;
      },

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    /* padding-right: 8px;  // 按钮右边的缩进*/ 
    .custom-tree-node-button{ // 宽度62左右目前
      display: none;
    }
  }
  .custom-tree-node:hover .custom-tree-node-button{
    display:block;
    background-color: rgb(245,247,250);
    padding: 0 10px;
    position:absolute;  
    right:0px;
    z-index: 666;
  }  
  .custom-tree-node i {
    margin-left: 8px;
  }
  .nodeLabel{
    width: 100px;
    margin-left: 10px;
  }
  .nodeLabel-isChoose{
        width: 100px;
    margin-left: 10px;
    color: #7FB545;
  }
    .dialog-title{
    color: #222222;
    font-weight: 500;
    font-size: 20px;
    display: flex;
    align-items: center;
    span{
      margin-left: 10px;
    }
  }
  .dialog-content{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    font-size: 24px;
  }

 // 以下为scss，记得去掉scoped，或者使用/deep/

.tree-line{
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
    transition: all 0.5s; // 关键动画！！！
  }

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

  // 横线
  .el-tree-node::after {
    content: "";
    width: 18px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 20px;
    border-width: 1px;
    border-top: 1px solid #E9E9E9;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }
	
  // 展开关闭的icon
  .el-tree-node__expand-icon{
    font-size: 16px;
    display: none;// 也可以去掉
    // 叶子节点（无子节点）
    &.is-leaf{
      color: transparent;
      display: none; // 也可以去掉
    }
  }
  .el-tree-node__content{
    height: 40px;

  }
}
.content{
  padding-right: 7px;
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100vh - 300px);
}
.content::-webkit-scrollbar {
  // display: none;
  width: 2px;
  height: 1px;
}
  .content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : rgba(127, 181, 69, 1);
  }
  .content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : transparent;
  }

一股脑全放上来了。经过我多方“借鉴”来的。

搞了半天，老板说不要这版设计了，大无语，全扔这里供以后参考。