Vue项目中遍历照片集时，如何实现每行显示两个表格？

Got it！要在Vue里实现遍历照片集合时每行显示两个表格的布局，其实核心就是先把数据按每2个一组拆分，再嵌套遍历渲染就行。我给你一步步拆解：

第一步：把照片集合按每2个一组分组 #

用Vue的计算属性来处理数据拆分，这样数据变化时分组会自动更新，非常灵活：

<script setup>
import { ref, computed } from 'vue';

// 替换成你实际的照片集合数据
const photos = ref([
  { id: 1, url: 'photo1.jpg', alt: '照片1', title: '风景1' },
  { id: 2, url: 'photo2.jpg', alt: '照片2', title: '风景2' },
  { id: 3, url: 'photo3.jpg', alt: '照片3', title: '风景3' },
  { id: 4, url: 'photo4.jpg', alt: '照片4', title: '风景4' },
  { id: 5, url: 'photo5.jpg', alt: '照片5', title: '风景5' },
]);

// 计算属性：自动将照片按每2个一组拆分
const groupedPhotos = computed(() => {
  const result = [];
  // 每次跳过2个索引，截取子数组实现分组
  for (let i = 0; i < photos.value.length; i += 2) {
    result.push(photos.value.slice(i, i + 2));
  }
  return result;
});
</script>

第二步：嵌套遍历渲染布局 #

在模板里先遍历分组后的数组生成<row>，再在每个分组里遍历照片生成<col>和对应的表格，完全匹配你要的结构：

<template>
  <div class="photo-container">
    <!-- 外层遍历分组，每个分组对应一行 -->
    <div class="row" v-for="(group, rowIdx) in groupedPhotos" :key="`row-${rowIdx}`">
      <!-- 内层遍历分组里的照片，每个照片对应一列+表格 -->
      <div class="col" v-for="(photo, colIdx) in group" :key="`col-${rowIdx}-${colIdx}`">
        <table class="photo-table">
          <tbody>
            <tr>
              <td><img :src="photo.url" :alt="photo.alt" class="photo-img" /></td>
            </tr>
            <!-- 可以根据需求添加更多表格内容，比如照片标题 -->
            <tr>
              <td class="photo-title">{{ photo.title }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

第三步：添加基础样式确保布局生效 #

用CSS让每行的两个列正确并排，还能适配响应式场景：

.photo-container {
  padding: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* 列之间的间距，可按需调整 */
  margin-bottom: 1.5rem; /* 行之间的间距，可按需调整 */
}

.col {
  flex: 1 1 calc(50% - 0.75rem); /* 自动填充宽度，减去gap的一半确保每行刚好两个 */
  min-width: 250px; /* 可选：小屏幕下自动切换为单列布局 */
  box-sizing: border-box;
}

.photo-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eee;
  text-align: center;
}

.photo-img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-title {
  padding: 0.5rem;
  background-color: #f8f9fa;
}

方案优势 #

• 适配任意数量的照片：不管是1张、5张还是N张，都会自动按规则分组，最后一行只有单个元素时也能正常显示
• 响应式更新：照片集合新增/删除时，计算属性会自动重新分组，无需手动处理
• 灵活扩展：如果以后要改成每行3个，只需要把计算属性里的i += 2改成i += 3，再调整CSS的宽度比例就行

内容的提问来源于stack exchange，提问作者ace