el-tree树父节点前端写死，动态获取子节点

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>
  
  <script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: "1层",
          children: [], // 初始时子节点为空
        },
        {
          id: 2,
          label: "2层",
          children: [
            {
              id: 21,
              label: "2层1",
              children: [],
            },
            {
              id: 22,
              label: "2层2",
              children: [],
            },
            {
              id: 23,
              label: "2层3",
              children: [],
            },
          ],
        },
        {
          id: 3,
          label: "3层",
          children: [], // 初始时子节点为空
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data, node, self) {
      if (data.children.length > 0) {
        // 已经加载过子节点，不再重复加载
        return;
      }

      this.fetchChildrenData(data.id).then((childrenData) => {
        // 更新树结构中的数据
        this.$set(data, "children", childrenData);
      });
    },
    fetchChildrenData(parentId) {
      return new Promise((resolve) => {
        setTimeout(() => {
          let childrenData;

          switch (parentId) {
            case 1:
              childrenData = [
                { id: 2, label: "子节点1" },
                { id: 3, label: "子节点2" },
              ];
              break;
            case 21:
              childrenData = [
                { id: 24, label: "子节点1-1" },
                { id: 25, label: "子节点2-2" }, // 注意这里修正了逗号错误
              ];
              break;
            // 根据需要添加更多case
            default:
              childrenData = [];
          }

          resolve(childrenData);
        }, 1000);
      });
    },
  },
};
</script>

正常这样就能跑的通。