vue 如何将平行结构循环在页面上时,不改变原来的数据结构,页面上展现出来的是层级结构

要在Vue中将平行结构循环展示为层级结构，而不改变原始数据结构，你可以使用计算属性来对数据进行处理并生成层级结构。

假设你有以下的平行结构数据：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', parentId: null },
      { id: 2, name: 'Item 2', parentId: null },
      { id: 3, name: 'Item 3', parentId: 1 },
      { id: 4, name: 'Item 4', parentId: 2 },
      { id: 5, name: 'Item 5', parentId: 3 },
      { id: 6, name: 'Item 6', parentId: 4 }
    ]
  };
}

要将这些平行结构的数据展示为层级结构，你可以创建一个计算属性来对数据进行处理。以下是示例代码：

computed: {
  hierarchicalItems() {
    const itemsMap = {};
    const rootItems = [];

    // 创建一个映射，将每个项的ID作为键
    // 将项本身作为值存储在映射中
    for (const item of this.items) {
      itemsMap[item.id] = { ...item, children: [] };

      // 如果项的父ID为null，则将其添加到根项目中
      if (item.parentId === null) {
        rootItems.push(itemsMap[item.id]);
      }
    }

    // 将每个项添加到其父项的children数组中
    for (const item of this.items) {
      if (item.parentId !== null) {
        itemsMap[item.parentId].children.push(itemsMap[item.id]);
      }
    }

    // 返回根项目作为层级结构的根
    return rootItems;
  }
}

在上述代码中，我们创建了一个计算属性`hierarchicalItems`。首先，我们创建一个空的映射`itemsMap`和一个空数组`rootItems`用于存储根项目。

然后，我们遍历原始数据，并根据ID创建映射，将每个项存储在映射中。如果项的父ID为null，则将其添加到根项目数组中。

接下来，我们再次遍历原始数据，并将每个项添加到其父项的`children`数组中。

最后，我们返回根项目数组作为层级结构的根元素。

现在，你可以在模板中使用`hierarchicalItems`计算属性来展示层级结构的数据。例如：

<template>
  <div>
    <ul>
      <li v-for="item in hierarchicalItems" :key="item.id">
        {{ item.name }}
        <ul>
          <li v-for="child in item.children" :key="child.id">
            {{ child.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

在上述示例中，我们使用了嵌套的`v-for`指令来循环遍历层级结构的数据，并将其展示为层级列表。

通过使用计算属性来处理数据，你可以将平行结构的数据转换为层级结构，并在页面上展示为层级结构，而不改变原始数据结构。