Vue.js表格渲染显示属性名称问题排查求助

阿华AIGC实验室

2026-5-27

排查Vue表格渲染显示属性名的问题

嘿，我来帮你搞定这个问题！从你描述的渲染结果（比如出现email:这种前缀）来看，核心问题是数据赋值逻辑和实际的数据源结构不匹配，再加上模板里有个小错误，咱们一步步来修：

1. 先修正模板里的低级错误

你在HTML里写了这么一行：

<td>{{ item.email.email}}</td>

这里多写了一个.email！根据你JS里的逻辑，item.email已经是你要展示的邮箱字符串了，嵌套的email属性根本不存在，先把它改成：

<td>{{ item.email }}</td>

2. 核心问题：你误解了`rawData`的结构

从输出的email: admin@admin.com这种格式可以推断，rawData里的每一项并不是你以为的数组，而是一个带键值对的对象！

你当前的JS代码是按数组下标取数据的：

this.theUserList.push({ 
  id: rawData[y][0], 
  email: rawData[y][1], 
  // ... 其他属性
});

但如果rawData里的每个元素是类似{email: 'admin@admin.com', username: 'admin'}的对象，那rawData[y][1]会返回undefined，而你如果不小心把整个对象赋值给了item.email，Vue在渲染对象时就会把它转成email: xxx这种字符串格式，这就是你看到的问题根源。

对应解决方法：

根据rawData的真实结构调整赋值逻辑：
如果rawData的每一项是对象（比如{id: 1, email: 'xxx', username: 'xxx'...}），改成直接取对象属性：

for (let y = 0; y < rawData.length; y++) {
  this.theUserList.push({ 
    id: rawData[y].id, 
    email: rawData[y].email, 
    username: rawData[y].username,
    status: rawData[y].status,
    gender: rawData[y].gender,
    registrationdate: rawData[y].registrationdate,
    theurl: rawData[y].theurl
  });
}

3. 额外的小优化

初始化theUserList时，没必要加默认的占位行，直接设成theUserList: []就行，这样还能省去后面的splice(0, 1)操作，代码更干净。
循环可以换成for...of语法，可读性更好：

for (const user of rawData) {
  this.theUserList.push({
    id: user.id,
    email: user.email,
    username: user.username,
    status: user.status,
    gender: user.gender,
    registrationdate: user.registrationdate,
    theurl: user.theurl
  });
}

按上面的步骤调整后，应该就能正常渲染出不带属性名的表格内容啦！

内容的提问来源于stack exchange，提问作者David Alejandro García García