vue如何在引入的el-tree前添加图标

<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>

<template>
    <div class="tree">     
    
    <el-tree :data="data5" node-key="id" default-expand-all >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i :class="data.icon"></i>{{ node.label }}
            </span>              
        </span>
    </el-tree>
 
    </div>
</template>

<script>
    export default {
        data () {
            return {
                 data5: [{
                    id: 1,
                    label: '一级 1',
                    icon:'el-icon-success',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1',
                            icon: 'el-icon-info'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1',
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2'
                    }]
                }]
            }
        }
    
    }
</script>
 
<style scoped>
 
</style>