前端递归的调用方法

<template>
  <div>
    <h1>场景数据</h1>
    <ul>
      <li v-for="(item, index) in mergedChildren" :key="index">
        {{ item.label }} - {{ item.tsName }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scenes: [
        {
          children: [
            {
              label: "河道",
              id: "子场景1",
            },
            // ... 其他子场景
          ],
          id: "场景一",
          label: "河道一",
        },
        {
          children: [
            {
      
              label: "河道来水",
              id: "子场景1",
            },
            // ... 其他子场景
          ],
          id: "场景二",
          label: "来水过程",
        },
        // ... 其他场景
      ],
    };
  },
  computed: {
    mergedChildren() {
      const result = [];
      this.extractChildren(this.scenes, result);
      return result;
    },
  },
  methods: {
    extractChildren(scenes, result) {
      scenes.forEach((scene) => {
        if (scene.children && Array.isArray(scene.children)) {
          result.push(...scene.children);
        }
      });
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

代码解析

1. 数据结构：

   • scenes 是原始的场景数据，包含多个场景对象，每个对象都有一个 children 数组。

2. 计算属性：

   • mergedChildren 是一个计算属性，它会调用 extractChildren 方法来提取所有子场景并将其推入 result 数组中。

3. 方法：

   • extractChildren 方法接收场景数组和结果数组作为参数，遍历每个场景的 children，并将其推入结果数组。

4. 模板：

   • 使用 v-for 循环遍历 mergedChildren，显示每个子场景的 label 和 tsName。