vue引入的el-tree前添加图标_el-tree加图标

根据有没有子节点来显示 前面是文件夹还是文件的图标   （因为遇到了就记录了下来）

如果有子节点(children)，就在前面加上一个文件夹的图标(片)，如果没有子节点，就显示的是文件的图标(片)

只有部分代码，在要push的地方添加一个icon，然后动态绑定这个icon，注意名字要一样；

<template>
 <div>
  <el-tree
      ref="addre"
      :load="loNo"
      :props="default-props"
      lazy
      node-key="id"
      show-checkbox
      :check-strictly="true"
       @check="heiChange"
      highlight-current
      :key="this.sho"
   >  
     <span class="custom-tree-node" slot-scope="{ node, data }">
        <span  v-if="data.label"  :class="folder">{{ `(${data.label})` }}</span>  
        <span  v-if="!data.label"  :class="data.icon"></span>    //注意此处是动态的绑定下面 push进去定义好的icon名称；
        <span>{{ node.label }}</span>
      </span>
  </el-tree>
 </div>
</template>
 
<script>
  export default {
     data() {
       return {
         folder:'iconFolder',    //显示文件夹  下面有css样式
         file:'iconFile',        //显示文件    下面有css样式
       };
     }，
     methods：{      //省略的点点不重要，
       loNo(aa,bb){
          var data = []
           //....
          if (res.folders) {
              //....
                 data.push({
                    //....
                    icon:this.folder    //在这里追加个icon就行了，然后调上面data里的名称
                 })
               //....
           }，
          if (res.files) {
              //....
                 data.push({
                    //....
                    icon:this.files     //在这里追加个icon就行了，然后调上面data里的名称
                 })
               //....
           }，
       }
     }
  };
</script>
 
//样式
<style scoped>
 .iconFolder::before{                 //样式名称与data里的对应
  /* background-color: aqua; */
  content:'';
  /* float: left; */
  display: inline-block;
  width: 15px;
  height: 15px;
  /* border: 1px solid#000; */
  background: url(../../assets/img/wenjianjia.png) no-repeat;
  background-size: 15px;
}
.iconFile::before{                    //样式名称与data里的对应
  /* background-color: aqua; */
  content:'';
  /* float: left; */
  display: inline-block;
  width: 15px;
  height: 15px;
  /* border: 1px solid#000; */
  background: url(../../assets/img/wenjian.png) no-repeat;
  background-size: 15px;
}
</style>

还有一个方法我在看其他内容发现，也是在span标签里套用了俩个img标签 进行判断他们children的长度，如果大于0，就显示这个图片，不用再push里添加icon了，因为用的是img标签，所以图片直接放在了img上的src里了，就不用在这写css了。