如何在Vue中使用v-for将一维数组渲染为指定结构的表格？

要实现把一维数组按每3个元素一行渲染成表格，核心是先将一维数组转换成二维数组（每3个元素为一个子数组），再通过两层v-for分别遍历行和列。

实现代码 #

脚本部分（处理数据）

<script>
export default {
  data() {
    return {
      mydata: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    };
  },
  computed: {
    formattedData() {
      const columnNum = 3; // 定义每行列数
      const tableData = [];
      for (let i = 0; i < this.mydata.length; i += columnNum) {
        // 按指定列数切割数组
        tableData.push(this.mydata.slice(i, i + columnNum));
      }
      return tableData;
    }
  }
};
</script>

模板部分（渲染表格）

<template>
  <table>
    <!-- 遍历每行数据 -->
    <tr v-for="(row, rowIndex) in formattedData" :key="rowIndex">
      <!-- 遍历当前行的每个元素 -->
      <td v-for="(item, colIndex) in row" :key="colIndex">
        {{ item }}
      </td>
    </tr>
  </table>
</template>

补充说明 #

• 若需要调整列数，直接修改columnNum的值即可，无需改动其他逻辑；
• 无论mydata中的元素是数字、字符串还是其他类型，{{ item }}都能正常渲染对应内容。

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