这里的图标使用的font-awesome，所以使用前需要先安装font-awesome字体图标组件

移出旧图标

tree 有单独设置图标的方法icon-class ，但是需要设置两个不一样的图标，所以就不用他的方法了。置空就可以了。

icon-class=" "

使用新图标

<el-tree
              node-key="id"
              :data="organizationTree"
              :props="defaultProps"
              :default-expanded-keys="expandedKeys"
              :default-checked-keys="checkedKeys"
              icon-class=" "
              @node-click="handleNodeClick">
             <span class="custom-tree-node" slot-scope="{node, data}">
              <span :class="{'text-green': treeLeaf(data)}">
                <i :class="['fa', {'fa-sitemap' : !treeLeaf(data),'fa-camera': treeLeaf(data)}]" class="mr10"></i>
                <span class="ellipsis" style="user-select:none;" :title="node.label">{{ node.label }}</span>
              </span>
            </span>
            </el-tree>

js

      expandedKeys: [],
      checkedKeys: [],
      organizationTree: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      

方法

  methods: {
    treeLeaf(data) {
      return !data.children;
    },
    }

样式

.mr10{
  margin-right: 10px;
}
  ::v-deep {
    /* 设置树形最外层的背景颜色和字体颜色 */
    .el-tree {
      color: #fff;
      background: transparent;
      width: calc(100% - 40px);
      margin-left: 20px;
    }

    /* 设置三角形图标的颜色 */
    .el-tree-node__expand-icon {
      color: #fff;
    }

    /* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
    .el-tree-node__content:hover .el-tree-node__expand-icon {
      color: rgba(0, 164, 255, 1);
    }

    /* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
      color: transparent;
    } */

    /* 树节点鼠标悬浮式改变背景色，字体颜色 */
    .el-tree-node__content:hover {
      background: none;
      color: rgba(0, 164, 255, 1);
    }

    /* 改变节点高度 */
    .el-tree-node__content {
      height: 36px;
    }

    /* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
    .el-tree-node:focus
    > .el-tree-node__content
    .el-tree-node__expand-icon {
      color: rgba(39, 114, 229, 1);
    }

    /* 改变被点击节点背景颜色，字体颜色 */
    .el-tree-node:focus > .el-tree-node__content {
      background: none;
      color: rgba(0, 164, 255, 1);
    }
  }