elementui tree组件自定义图标

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

直接上代码

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

<script>
  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"
          },
        ],
      }
    }
  }
</script>

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