el-tree一级二级三级展示不同图标

你可以使用 el-tree 的 node-key 属性来为每个节点提供一个唯一的标识符，然后根据节点的层级设置不同的图标。下面是一个示例代码，展示了如何使用不同图标来显示 el-tree 的一级、二级和三级节点：

<template>
  <el-tree :data="data" :node-key="nodeKey" :props="defaultProps" :expand-on-click-node="false">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <i :class="getIconClass(node.level)"></i>
      {{ node.label }}
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: '一级节点',
          children: [
            {
              label: '二级节点',
              children: [
                {
                  label: '三级节点'
                }
              ]
            }
          ]
        }
      ],
      nodeKey: 'id',
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    getIconClass(level) {
      switch (level) {
        case 1:
          return 'icon-one-level';
        case 2:
          return 'icon-two-level';
        case 3:
          return 'icon-three-level';
        default:
          return 'icon-default';
      }
    }
  }
};
</script>

<style>
.custom-tree-node {
  display: flex;
  align-items: center;
}

.icon-one-level::before {
  content: '\e600';
  margin-right: 5px;
  color: red;
}

.icon-two-level::before {
  content: '\e601';
  margin-right: 5px;
  color: green;
}

.icon-three-level::before {
  content: '\e602';
  margin-right: 5px;
  color: blue;
}

.icon-default::before {
  content: '\e603';
  margin-right: 5px;
  color: gray;
}
</style>

在上面的代码中，我们使用了 el-tree 组件来展示树状结构的数据，通过设置 :props 属性来指定节点的属性名称。然后，在自定义节点模板中，根据节点的层级级别，使用 :class 绑定不同的 CSS 类名，从而显示不同的图标。

你可以根据实际需求修改图标的样式和显示方式，并根据节点的层级设置不同的图标样式。