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

template

  
    
    {{ node.label }}
  

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