Vue/JavaScript动态对象入数组：表格数据填充异常解决问询

你的核心问题是生成行数据时把每个字段拆成了独立的对象，导致表格无法将多个字段对应到同一行。

错误原因分析 #

你当前的代码会为每个item的每个字段，循环productKeys的次数，每次只push一个包含单个键值对的对象。比如一个商品有id、name两个字段，最终会生成多个像{id: 1}、{name: "商品A"}这样的零散对象，而表格需要的是每个商品对应一个包含所有字段的完整对象（比如{id:1, name:"商品A"}）。

修正后的代码 #

方案1：直接复用原数据对象（推荐，若原数据字段与表头完全匹配）

// 遍历每个商品数据，直接将完整对象推入rows
response.data.data.forEach(item => {
    this.rows.push({...item}); // 用扩展运算符创建副本，避免后续修改原数据影响表格
});

方案2：严格按表头字段构建行对象（确保只包含表头需要的字段）

如果原数据有额外字段，或者需要严格对齐表头的key，可以用这个方案：

response.data.data.forEach(item => {
    const row = {};
    // 遍历表头的key，从当前item中取出对应值，构建完整行
    this.productKeys.forEach(key => {
        row[key] = item[key];
    });
    this.rows.push(row);
});

为什么这样能解决问题 #

修正后，每个商品数据都会被转换成一个包含所有表头字段的对象，rows数组里的每个元素对应表格的一行，字段key和columns里的field完全匹配，表格就能正确将表头和单元格值对应起来。

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