Vue.js中如何用单个对象通过v-for填充表格表头与行？

你的代码存在几个关键问题，导致页面无法正常渲染：

• v-for使用错误：你用v-for="(table, index) in table"遍历单个对象，且循环变量名和数据源重名，造成变量覆盖，Vue无法正确解析。
• 表头字段名错误：数据源里定义的是headers数组，但模板里写的是table.header（少了末尾的s）。
• 行数据未正确遍历：你直接输出整个rows数组，没有循环生成每一行的具体内容。

按照你期望的效果（表头为header 1和header 2，header 1列下依次显示row 1到row 4），修正后的代码如下：

<template>
  <table>
    <thead>
      <tr>
        <!-- 循环渲染所有表头项 -->
        <th v-for="(header, idx) in table.headers" :key="idx">
          {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 循环渲染每一行数据 -->
      <tr v-for="(row, idx) in table.rows" :key="idx">
        <!-- 第一列显示行内容 -->
        <td>{{ row }}</td>
        <!-- 第二列留空，可按需自定义内容 -->
        <td></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      table: {
        headers: ["header 1", "header 2"],
        rows: ["row 1", "row 2", "row 3", "row 4"],
      },
    };
  },
};
</script>

关键修正说明： #

1. 移除了不必要的表格循环，因为你只有一个表格对象，无需遍历生成多个表格。
2. 通过v-for遍历table.headers，逐个渲染表头单元格。
3. 通过v-for遍历table.rows，为每个行数据生成对应的表格行，每行包含两个单元格以匹配表头的两列。

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