Vue v-for 高效分组渲染与条件差异化展示教程

<template>
  <div>
    <!-- 外层 v-for 循环，i 代表卡片索引，从 1 开始 -->
    <div v-for="i in Math.ceil(arr.length / 8)" :key="i" class="card">
      <!-- 卡片内容将在这里填充 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [], // 假设这是我们的原始数据数组
    };
  },
  methods: {
    /**
     * 根据卡片索引获取对应的子数组
     * @param {number} i - 当前卡片的索引 (从 1 开始)
     * @returns {Array} - 包含 8 条记录的子数组
     */
    getSubArray(i) {
      const recordsPerCard = 8;
      const start = (i - 1) * recordsPerCard; // 计算切片的起始索引
      const end = start + recordsPerCard;     // 计算切片的结束索引
      return this.arr.slice(start, end);      // 返回切片后的子数组
    },
  },
  created() {
    // 模拟生成 40 条记录的数组
    for (let i = 0; i < 40; i++) {
      this.arr.push({ id: i, value: `Item ${i + 1}` });
    }
  },
};
</script>

<template>
  <div>
    <div v-for="i in Math.ceil(arr.length / 8)" :key="i" class="card">
      <!-- 内层 v-for 循环，item 为当前记录，j 为其在子数组中的索引 -->
      <div v-for="(item, j) in getSubArray(i)" :key="item.id">
        <!-- 如果是子数组的第一个元素 (j === 0)，则应用 section1 样式 -->
        <div v-if="j === 0" class="section1">
          <h3>主要信息: {{ item.value }}</h3>
          <p>这是卡片 {{ i }} 的第一条记录。</p>
        </div>
        <!-- 否则，应用 section2 样式 -->
        <div v-else class="section2">
          <p>辅助信息: {{ item.value }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<template>
  <div class="container">
    <div v-for="i in Math.ceil(arr.length / 8)" :key="i" class="card-wrapper">
      <div class="card">
        <h4 class="card-title">卡片 {{ i }}</h4>
        <div v-for="(item, j) in getSubArray(i)" :key="item.id" class="card-section">
          <div v-if="j === 0" class="section1">
            <p class="main-info"><strong>主记录:</strong> {{ item.value }}</p>
            <p class="detail-info">这是本卡片最重要的数据展示。</p>
          </div>
          <div v-else class="section2">
            <p class="sub-info"><strong>子记录:</strong> {{ item.value }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [], // 模拟的原始数据数组
    };
  },
  methods: {
    /**
     * 根据卡片索引获取对应的子数组
     * @param {number} i - 当前卡片的索引 (从 1 开始)
     * @returns {Array} - 包含指定数量记录的子数组
     */
    getSubArray(i) {
      const recordsPerCard = 8; // 每张卡片包含的记录数
      const start = (i - 1) * recordsPerCard;
      const end = start + recordsPerCard;
      return this.arr.slice(start, end);
    },
  },
  created() {
    // 在组件创建时填充模拟数据
    for (let i = 0; i < 40; i++) {
      this.arr.push({ id: i, value: `数据项 ${i + 1}` });
    }
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background-color: #f0f2f5;
}

.card-wrapper {
  flex: 0 0 calc(33.333% - 20px); /* 每行显示3个卡片，考虑间距 */
  max-width: calc(33.333% - 20px);
  box-sizing: border-box;
}

.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  overflow: hidden;
}

.card-title {
  font-size: 1.2em;
  color: #333;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.card-section {
  margin-bottom: 8px;
  padding: 5px 0;
}

.section1 {
  background-color: #e6f7ff; /* 突出第一个元素 */
  border-left: 4px solid #1890ff;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.section1 .main-info {
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 5px;
}

.section1 .detail-info {
  font-size: 0.9em;
  color: #666;
}

.section2 {
  background-color: #fafafa;
  border-left: 2px solid #d9d9d9;
  padding: 8px;
  border-radius: 4px;
}

.section2 .sub-info {
  color: #555;
  font-size: 0.9em;
}

p {
  margin: 0;
}
</style>