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

要为 el-tree 的一级、二级和三级节点展示不同的图标，您可以使用 el-tree 的 `node-key` 属性以及 `render-content` 插槽来实现。

首先，您需要为每个节点提供一个唯一的 `node-key` 值，以便在渲染时进行识别。接下来，使用 `render-content` 插槽来自定义节点的内容和样式。

下面是一个示例代码，展示了如何根据节点级别设置不同的图标：

<template>
  <el-tree :data="treeData" :node-key="nodeKey">
    <template v-slot:default="{ node }">
      <span>
        <i :class="getIconClass(node)" style="margin-right: 5px;"></i>
        {{ node.label }}
      </span>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '一级节点',
          level: 1,
        },
        {
          label: '一级节点',
          level: 1,
          children: [
            {
              label: '二级节点',
              level: 2,
            },
            {
              label: '二级节点',
              level: 2,
              children: [
                {
                  label: '三级节点',
                  level: 3,
                },
              ],
            },
          ],
        },
      ],
      nodeKey: 'label', // 使用 label 作为节点的唯一标识
    };
  },
  methods: {
    getIconClass(node) {
      switch (node.level) {
        case 1:
          return 'el-icon-folder';
        case 2:
          return 'el-icon-tickets';
        case 3:
          return 'el-icon-document';
        default:
          return '';
      }
    },
  },
};
</script>

在上面的示例中，我们根据节点的 `level` 属性来动态地返回不同的图标类名。您可以根据您的实际需求修改图标类名和样式。