VueJS如何遍历属性动态变化的对象数组并渲染为矩阵表格

你需要先完成两个核心步骤：先提取全局唯一的表头字段，再分层遍历数组和对应字段渲染内容。

步骤1：提取所有动态表头字段 #

遍历整个对象数组，把所有出现过的对象属性名收集起来，去重后得到完整的表头列表，避免因为单个对象缺属性导致列缺失。
示例计算属性代码（Vue环境）：

// 计算属性，自动响应数据变化更新表头
computed: {
  tableHeaders() {
    const allKeys = new Set()
    this.dataList.forEach(item => {
      Object.keys(item).forEach(key => allKeys.add(key))
    })
    // 如果需要固定某列在前，比如location放在第一，可以加排序逻辑调整
    return Array.from(allKeys)
  }
}

步骤2：双层v-for渲染表格 #

先遍历表头渲染<thead>的列，再遍历每一行数据，嵌套遍历表头字段取对应值渲染<td>，缺属性的位置可以用-占位。
模板代码示例：

<template>
  <table border="1" cellpadding="8">
    <!-- 渲染表头 -->
    <thead>
      <tr>
        <th v-for="header in tableHeaders" :key="header">
          {{ header }}
        </th>
      </tr>
    </thead>
    <!-- 渲染表体 -->
    <tbody>
      <tr v-for="(row, rowIndex) in dataList" :key="rowIndex">
        <td v-for="header in tableHeaders" :key="header">
          {{ row[header] ?? '-' }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

可选优化点 #

• 如果需要把属性名转换为中文显示，比如把webhookStatus显示为Webhook状态，可以提前维护一个字段映射对象，渲染表头时取值即可
• 如果需要对不同状态做样式高亮，可以在<td>上根据row[header]的值动态绑定class
• 如果数据量很大，提取表头的逻辑可以加缓存，避免每次重渲染都全量遍历

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