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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM