element ui, el-tree, 自定义图标_el-tree 加图标

template

<el-tree :data="treeData" default-expand-all highlight-current>
  <span class="custom-tree-node" slot-scope="{ node }">
    <i :class="node.level == 1 ? 'icon1' : node.level == 2 ? 'icon2' : 'icon3'"></i>
    <span>{{ node.label }}</span>
  </span>
</el-tree>

data

treeData: [
  {
    id: '',
    label: '全部',
    level: '1',
    children: [{
      id: '201',
      label: '一级',
      level: '2',
      children: [{
        id: '2011',
        label: '二级',
        level: '3'
      }, {
        id: '2012',
        label: '二级',
        level: '3'
      }, {
        id: '2013',
        label: '二级',
        level: '3'
      }]
    }, {
      id: '301',
      label: '一级',
      level: '2',
    }, {
      id: '401',
      label: '一级',
      level: '2',
    }]
  }
],

css

.icon1,.icon2,.icon3 {
    display: inline-block;
    width: 14px;
    height: 14px;
}
 
.icon1 {
    background: url("../images/tree/icon1.png") no-repeat;
}
.icon2 {
    background: url("../images/tree/icon2.png") no-repeat;
}
.icon3 {
    background: url("../images/tree/icon3.png") no-repeat;
}
 
.is-current > .el-tree-node__content .custom-tree-node > .icon1 {
    background: url("../images/tree/icon1-active.png") no-repeat;
}
.is-current > .el-tree-node__content .custom-tree-node > .icon2 {
    background: url("../images/tree/icon2-active.png") no-repeat;
}
.is-current > .el-tree-node__content .custom-tree-node > .icon3 {
    background: url("../images/tree/icon3-active.png") no-repeat;
}
 
.is-current > .el-tree-node__content .custom-tree-node > span {
    color: #5369de;
}

【参考源】

组件 | Element