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，達到顯示不同圖標的效果 

下面 的效果是是我真實數據渲染的，上面的假數據 結構一樣