VueJS如何实现固定3列、自动填充单元格的表格组件

要实现每行固定3列、按从左到右顺序填充的表格，核心思路是把原数据数组按每3个元素一组拆分，再通过嵌套的v-for遍历分组后的数据生成行和单元格，这样无论items的长度如何变化，都能自动适配3列布局。

修改后的组件代码 #

<template>
  <div>
    <table>
      <tbody>
        <!-- 遍历分组后的数组生成表格行 -->
        <tr v-for="(rowItems, rowIndex) in splitItems" :key="rowIndex">
          <!-- 遍历当前行的元素生成单元格 -->
          <td v-for="(item, colIndex) in rowItems" :key="colIndex">
            {{ item.name }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {id: 1, name: "Item 1", price: 10.99 },
        {id: 2, name: "Item 2", price: 20.50 },
        {id: 3, name: "Item 3", price: 15.75 },
        {id: 4, name: "Item 4", price: 15.75 }
      ]
    };
  },
  computed: {
    splitItems() {
      const result = [];
      const columnCount = 3;
      // 按每3个元素为一组拆分原数组
      for (let i = 0; i < this.items.length; i += columnCount) {
        result.push(this.items.slice(i, i + columnCount));
      }
      return result;
    }
  }
};
</script>

关键说明 #

• 计算属性splitItems：这是实现响应式的核心，它依赖items数组，当items新增、删除或修改元素时，计算属性会自动重新计算分组结果，保证表格布局实时更新。
• 嵌套v-for：外层v-for遍历分组后的每组数据生成表格行，内层v-for遍历组内元素生成单元格，自然实现每行最多3个元素的布局。
• 灵活性：如果后续需要调整列数，只需修改columnCount的值即可，无需改动模板结构。

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