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，达到显示不同图标的效果 

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

elementui tree组件自定义图标

原文：https://www.cnblogs.com/hellosxs/p/11152851.html