el-tree前添加图标，el-tree只从第二级添加图标，el-tree添加增删改图标

el-tree是特别常见的组件，一般要求给每一级文字前面添加图标，从第二级开始添加删除，修改图标

增删改的图标都是当鼠标悬浮在当前节点之上才显示！
先展示下效果图

第二级添加删除，修改图标

代码结构

<template>
    <!-- 节点树结构 -->
                  <div class="treeBox">
                    <el-tree
                      ref="tree"
                      node-key="id"
                      :data="dataLister"
                      :props="defaultProps"
                      default-expand-all
                      :expand-on-click-node="false"
                      @node-click="handleNodeClick"
                      style="height:100%; margin-top:30px; background-color:#f5f5f5;">
                      <span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
                              <span v-if="dataLister.catalogueList" class="el-icon-folder-opened">  </span>
                              <span v-else class=" el-icon-folder-opened" style="margin-right: 3px"></span>
                                 <span>{{ node.label}}</span>
							  <!-- 用v-show判断展示和隐藏，且给第二级添加edit变量，用于控制只从第二级开始添加删除，修改图标 -->
                              <el-link v-show="data.del" size="mini" type="primary" @click.stop="addNodes(node, data )" style="margin-left: 50px;" icon="el-icon-plus"></el-link>
                              <el-link v-show="data.del && !data.edit " size="mini" type="primary" @click.stop="deleteNodes(node, data )" style="margin-left: 10px;" icon="el-icon-delete"></el-link>
                              <el-link v-show="data.del && !data.edit" size="mini" type="primary" @click.stop="editNodes(node, data )" style="margin-left: 10px;" icon="el-icon-edit"></el-link>
                      </span>
                    </el-tree>
                  </div>
</template>
data中的内容
data（）{
   return{
            dataLister:[
              dataLister:[
              {
                name:this.$route.query.courseName,  //第一级节点目录手动添加，第二级是动态获取的后端数据，拼接成完整结构
                catalogueList:[],         //catalogueList为接受完整树结构的数据数组，不同结构名字不同，根据自己的实际情况决定
                edit:1                    //添加一个变量，用于判断添加图标从第几级，第几层开始
              }
            ],
            defaultProps: {  //组件必须的参数，children和label是组件固定结构，若绑定的数据名字不同，直接赋值即可
               children:'catalogueList',    
               label:'name'
            },   
               arrs:[],   //选中的节点数组
			 nodesIds:'',   //某个自定义的值
    }
}
//方法
methods：{
    //点击节点方法
          handleNodeClick(data){
             console.log(data.id)
             this.nodesIds = data.id
			  //此处方法处理的是获取点击任意节点，获取当前节点及其所有子节点的 ID 值
             this.arrs = []
             this.arrs.push(data.id)
             data.catalogueList.forEach((el)=>{
                     this.arrs.push(el.id)
                 el.catalogueList.forEach((ell)=>{
                     this.arrs.push(ell.id)
                 ell.catalogueList.forEach((elll)=>{
                            this.arrs.push(elll.id)
                    elll.catalogueList.forEach((ends)=>{
                             this.arrs.push(ends.id)
                       })
                    })
                })
             })
             this.queryObj.pageIndex = this.pageIndex     //查询数据所需的分页参数 -- 页码
             this.queryObj.pageSize =  this.pageSize      //查询数据所需的分页参数 -- 页数
             this.queryObj.ids =  this.arrs               //点击以后获取的所有节点 ID 值。用数组存放作为查询数据参数传给后端接口
             getTestList(this.queryObj).then((res)=>{
                 console.log(res.data.list)
                 this.subjectData = res.data.list
                
             })
          },
         //鼠标移入移除显示和隐藏图标
           mouseenter(data){
              this.$set(data, 'del', true)
          },
          mouseleave(data){
              this.$set(data, 'del', false)
          },
         //添加节点
          addNodes(node, data ){
             this.dialogVisible = true
             this.params.parentId = data.id
          },
 //删除节点
          deleteNodes(node,data){
              var arrs = []
              data.catalogueList.forEach((el)=>{
                  arrs.push(el.id)
              })
              this.$confirm('您将删除\xa0\xa0' + '【'+ data.name  + '】'+ '\xa0\xa0是否继续?',  '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    let objs = {
                       id:data.id,
                       ids:arrs
                    }
                    deleteItems(objs).then((e)=>{  //删除接口
                      if(e.status == 1){
                        this.$message({
                          type: 'success',
                          message: '删除成功!'
                        });
                         this.getTrees()
                      }
                    })
                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消删除'
                    });
                  });
          },
          //编辑节点
          editNodes(node,data){
             this.dialogVisible2 = true
             console.log(node,'输出标记',data)
             this.modify = {
                 id:data.id,
                 name:data.name
             }
          },

}

## 结束