ElementUI:tree给节点添加icon图标

基本的树代码

<el-tree :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick">
</el-tree>

在树代码中间,增加span标签,通过:class绑定icon,通过label绑定树的名称

<el-tree :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick">
  <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
      <i :class="data.icon"></i>{{ data.label }}
    </span>
  </span>
</el-tree>

在data数据中,给每个对象绑定icon,值为需要的icon图标

data: [{
  label: '一级 1',
  icon:'el-icon-user',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1'
    }]
  }]
}, {
  label: '一级 2',
  icon:'el-icon-user',
  children: [{
    label: '二级 2-1',
    icon:'el-icon-user',
    children: [{
      label: '三级 2-1-1',
      icon:'el-icon-user',
    }]
  }, {
    label: '二级 2-2',
    children: [{
      label: '三级 2-2-1'
    }]
  }]
}, {
  label: '一级 3',
  children: [{
    label: '二级 3-1',
    children: [{
      label: '三级 3-1-1'
    }]
  }, {
    label: '二级 3-2',
    children: [{
      label: '三级 3-2-1'
    }]
  }]
}],

运行结果:

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页