element 树形结构自定义节点图标

1. :render-content="renderContent"

      <el-tree :data="treedata" :render-content="renderContent" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    renderContent(h, { node, data, store }) {
      let name = this.icons[data.type]
      console.log(`@/assets/tree/${name}.png`)
      return (
        <span>
          <span class="fileicon">
            <img src={require(`@/assets/tree/${name}.png`)} />
            <span> {node.label}</span>
          </span>
        </span>
      )
    }

2.使用template

      <el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <span class="fileicon"><img :src="require('@/assets/tree/'+icons[data.type]+'.png')" /></span>
          <span>{{ node.label }}</span>
        </template>
      </el-tree>
posted @ 2021-03-11 14:33  wwj007  阅读(1368)  评论(0编辑  收藏  举报
……