elementui tree组件自定义图标

~~~

<el-tree
:data="assetsTreeList"
:props="assetsProps"
node-key="id"
:show-checkbox=this.checkFlag
:default-checked-keys=this.roleAssetsCheckList
>
<span class="custom-tree-node"  slot-scope="{ node, data }">
  <span :dataType="data.type">
        <i :class="data.checkIcon"></i>
        <i :class="data.iconSkin"></i>
{{ node.label }}
  </span>
</span>
</el-tree>

~~~

~~~

export default {
    name: "demo",
data(){
      return {
        assetsTreeList: [
          {
            "name": "基础",
　　　　　　　"keyCode": "ATS_BASE_V",
　　　　　　　"type": "1",
　　　　　　　"typeTxt": "添加",
　　　　　　　"function": "0",
　　　　　　  "code": "D0201001",
　　　　　　 "dataResourceTree": [{
              "name": "编辑",
　　　　　　　　 "parentID": "D0201001",
　　　　　　　　 "keyCode": "ATS_BASE_E",
　　　　　　　　　"type": "2",
　　　　　　　　　"function": "0",
　　　　　　　　　"code": "D0201002",
　　　　　　　　　"dataResourceTree": [],
　　　　　　　　　"id": "D0201002"
　　　　　　}],
　　　　　　"id": "D0201001"
　　　　},
　　　　{
          "name": "位置",
　　　　　　"keyCode": "ATS_LOCA_V",
　　　　　　"type": "1",
　　　　　　"typeTxt": "添加",
　　　　　　"function": "0",
　　　　　　"code": "D0202001",
　　　　　　"dataResourceTree": [{
              "name": "编辑",
　　　　　　　　"parentID": "D0202001",
　　　　　　　　"keyCode": "ATS_LOCA_E",
　　　　　　　　"type": "2",
　　　　　　　　"function": "0",
　　　　　　　　"code": "D0202002",
　　　　　　　　"dataResourceTree": [],
　　　　　　　　"id": "D0202002"
　　　　　　}],
　　　　　　"id": "D0202001"
　　　　},
　　　],
　　}
  }
}

~~~

在对树结构进行渲染的时候使用slot-scope,根据结构数据中iconSkin对应的值不同，设置不同的class，达到显示不同图标的效果 

下面 的效果是是我真实数据渲染的，上面的假数据 结构一样