element-plus2.5.10版本el-tree按不同级别设置不同图标与选中图标

需要实现的效果：

查看tree组件node节点的数据结构是这样的，这个官方文档中没看到说明，自己打印了一下看到的，其中比较有用的属性就是level当前树节点的等级，data当前树节点的数据，isCurrent是否是当前选中的树节点

所以可以使用插槽与node属性来来生成不同图标，以下代码可以用于参考

<template>
      <div class="left-tree">
        <el-tree :data="data" @node-click="handleNodeClick" node-key="id" default-expand-all>
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <!-- 第一级固定一个图标 -->
              <img :src="requireImg('tree/1.png')" v-if="node.level === 1" class="icon" />
              <!-- 非第一级且有子元素是个文件夹图标 -->
              <img :src="requireImg('tree/2.png')" v-if="node.childNodes.length && node.level !== 1" class="icon" />
              <!-- 非第一级且没子元素且未选中是个文件图标 -->
              <img :src="requireImg('tree/4.png')" v-show="!node.isCurrent && !node.childNodes.length && node.level !== 1" class="icon" />
              <!-- 非第一级且没子元素且选中了是个黄色文件图标 -->
              <img :src="requireImg('tree/3.png')" v-show="node.isCurrent && !node.childNodes.length && node.level !== 1" class="icon" />
              <span @click="getNode(node)" :class="[node.childNodes.length ? 'bold' : '', node.isCurrent ? 'orange' : '']">{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "发起工单",
          children: [
            {
              id: 4,
              label: "待派发（11）",
              a: 1,
            },
            {
              id: 4,
              label: "已派发（25）",
              a: 1,
            },
          ],
          a: 10,
        },
        {
          id: 2,
          label: "工单情况汇总",
          children: [
            { id: 5, label: "待完成（3）", a: 1 },
            { id: 6, label: "已完成（5）", a: 1 },
            { id: 7, label: "发起人确认（1）", a: 1 },
          ],
          a: 0,
        },
        {
          id: 3,
          label: "工单确认",
          children: [
            { id: 7, label: "待确认（3）", a: 1 },
            { id: 8, label: "已确认（3）", a: 1 },
          ],
          a: 0,
        },
        {
          id: 3,
          label: "相关查询",
          children: [
            { id: 9, label: "待完成（3）", a: 1 },
            { id: 10, label: "待确认（3）", a: 1 },
            { id: 11, label: "已确认（3）", a: 1 },
            {
              id: 12,
              label: "已归档（196）",
              a: 1,
              children: [
                {
                  id: 13,
                  label: "2022",
                  a: 2,
                  children: [
                    { id: 142, label: "01", a: 3 },
                    { id: 142, label: "02", a: 3 },
                    { id: 142, label: "03", a: 3 },
                  ],
                },
              ],
            },
          ],
          a: 0,
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    }
  },
  methods: {
    // 这个打印出来的是node.data
    handleNodeClick(data) {
      console.log(data)
    },
     // 这个打印出来的是node
     getNode(node) {
      console.log(node)
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-tree-node {
      display: flex;
      align-items: center;
      .icon {
        margin-right: 10px;
      }
      .bold {
        font-weight: bold;
      }
      .orange {
        color: #f1a428;
      }
    }
</style>