elementui tree组件自定义图标

最新推荐文章于 2024-04-09 14:28:51 发布

weixin_30359021

最新推荐文章于 2024-04-09 14:28:51 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hellosxs/p/11152851.html

本文介绍如何在Vue中使用element-ui的树形组件，通过slot-scope根据数据动态展示不同图标，实现资源权限管理界面的美化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

~~~

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