Vue中如何一次性读取多维数组中的所有对象而非逐行读取

算力阿峰

2026-8-16

解决方案：一次性遍历二维数组中的所有对象

方法1：使用嵌套`v-for`

直接在模板里嵌套两层v-for，外层遍历行，内层遍历每行的tile，不用手动指定每行索引：

<template>
  <div v-for="(row, rowIndex) in map" :key="rowIndex">
    <div v-for="tile in row" :key="`${tile.x}-${tile.y}`">
      <div class="tile">{{ tile.y }} | {{ tile.x }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const map = ref([
  // 你的多维数组内容
])
</script>

注意：

外层key用行索引rowIndex即可（如果行不会重新排序）
内层key不要直接用tile对象，推荐用x和y的组合，保证唯一性，避免Vue DOM diff出问题

方法2：扁平化数组（计算属性处理）

如果不想用嵌套循环，可以先把二维数组转成一维数组，用计算属性实现：

<template>
  <div v-for="tile in flattenedMap" :key="`${tile.x}-${tile.y}`">
    <div class="tile">{{ tile.y }} | {{ tile.x }}</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const map = ref([
  // 你的多维数组内容
])

const flattenedMap = computed(() => {
  // 把二维数组摊平为一维数组
  return map.value.flat()
})
</script>

Array.flat()会直接处理二维结构，若有更深层级嵌套，可传入参数如flat(2)适配。