VueJS使用v-for实现垂直循环时，td标签无法渲染body变量对应内容

现有代码无法正常渲染单元格内容的核心问题：

• 循环逻辑错误：模板中写的v-for="(row, i) in [body]"相当于把原对象硬包装成仅含1个元素的数组，整个外层循环只执行1次，此时循环拿到的row是完整的body对象，并不是逐行拆分后的单行数据；即便去掉外层括号直接遍历body，拿到的也是每个字段对应的列值数组，依然不是单行数据结构。
• 数据结构错配：当前body是典型的列存储结构——每个对象键对应一列的所有值，而表格行渲染需要行存储结构——每一项是包含单行所有字段值的对象，结构不匹配自然无法通过row[field]取到正确的单元格内容。
• 基础语法疏漏：你提供的body示例代码存在JS语法错误：adress、company字段行末尾缺少逗号，直接运行会触发解析报错。

1. 将列存储的body转换为适合表格渲染的行结构，建议在计算属性中做转换：

computed: {
    tableRows() {
        // 所有列长度一致，取任意列长度作为总行数
        const rowTotal = Object.values(this.body)[0].length
        return Array.from({ length: rowTotal }, (_, rowIndex) => {
            const currentRow = {}
            // 逐行匹配每个字段对应的值
            Object.keys(this.body).forEach(fieldKey => {
                currentRow[fieldKey] = this.body[fieldKey][rowIndex]
            })
            return currentRow
        })
    }
}

2. 修正模板中的外层循环逻辑，去掉错误的数组包装写法，直接循环转换好的行结构：

<tr v-for="(row, i) in tableRows" :key="`row-${i}`">
    <td v-for="(field, j) in mappedFields" :key="`mfield-${j}`">
        {{ row[field] }}
    </td>
</tr>

转换完成后得到的行结构完全匹配遍历取值逻辑：

[
  { name: "amine", adress: "montreal", company: "apple", email: "my@gmail.com", phone: 5497821445449 },
  { name: "bill", adress: "new york", company: "microsoft", email: "john@microsoft.com", phone: 559485556555 }
]
此时即可正常渲染每个单元格的对应内容。

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