element组件库的tree给节点添加icon图标

组件库的tree接点

<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}">
    <span>
      <i :class="data.icon"></i>{{ node.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'
    }]
  }]
}],

就可以啦其实用的就是类似插槽之类的方法；