Vue.js中基于API返回JSON渲染自定义表格的问题

问题说明 #

API返回的表格数据存在两种结构：

• 结构1：colVal为单个对象，对应单行表格
• 结构2：colVal为数组，对应多行表格

现有代码已正确渲染表头，但列值无法对应到正确列，且生成多余行，需要修正渲染逻辑。

两种JSON结构示例 #

结构1（colVal为单个对象）

{
  "id": 1,
  "enabled": true,
  "headers": [
    {
      "id": 1,
      "header_name": "LastName",
      "colVal": { "id": 1, "value": "Hopper" }
    },
    {
      "id": 2,
      "header_name": "FirstName",
      "colVal": { "id": 1, "value": "Grace" }
    }
  ]
}

期望渲染表格：

结构2（colVal为数组）

{
  "id": 1,
  "enabled": true,
  "headers": [
    {
      "id": 1,
      "header_name": "LastName",
      "colVal": [
        { "id": 1, "value": "Hopper" },
        { "id": 3, "value": "Lovelace" }
      ]
    },
    {
      "id": 2,
      "header_name": "FirstName",
      "colVal": [
        { "id": 2, "value": "Grace" },
        { "id": 4, "value": "Ada" }
      ]
    }
  ]
}

期望渲染表格：

现有代码问题 #

<table v-if="apiResponseData.custom_field_table[0].enabled_ind == true">
  <thead>
    <tr>
      <th
        v-for="header in apiResponseData.custom_field_table[0].headers"
        :key="header.id"
      >
        {{ header.header_name }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="headerVal in apiResponseData.custom_field_table">
      <div v-for="col in headerVal.headers">
        <td style="width: 1%; border: 1px solid; text-align: center">
          {{ col.colVal[0].value }}
        </td>
      </div>
    </tr>
  </tbody>
</table>

• 错误循环apiResponseData.custom_field_table（该数组元素是表格配置，不是行数据）
• <tr>内嵌套<div>违反HTML表格规范，导致布局混乱
• 直接取col.colVal[0].value无法兼容两种colVal结构，也无法遍历多行数据

修正方案 #

1. 添加计算属性处理数据 #

在Vue组件中添加计算属性，统一两种结构的数据格式，并构造行数据：

computed: {
  processedTableData() {
    const table = this.apiResponseData.custom_field_table[0];
    if (!table || !table.enabled) return null;

    // 统一将colVal转为数组，兼容两种结构
    const formattedHeaders = table.headers.map(header => ({
      ...header,
      colVal: Array.isArray(header.colVal) ? header.colVal : [header.colVal]
    }));

    // 获取表格行数（取第一个header的colVal长度，假设所有header行数一致）
    const rowCount = formattedHeaders[0]?.colVal.length || 0;

    // 构造每行的数据：每行对应各表头的同索引值
    const tableRows = Array.from({ length: rowCount }, (_, rowIdx) => {
      return formattedHeaders.map(header => header.colVal[rowIdx]?.value || '');
    });

    return {
      headers: formattedHeaders,
      rows: tableRows
    };
  }
}

2. 修改模板渲染逻辑 #

使用处理后的数据渲染表格，确保列值与表头正确对应：

<table v-if="processedTableData">
  <thead>
    <tr>
      <th v-for="header in processedTableData.headers" :key="header.id">
        {{ header.header_name }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, rowIndex) in processedTableData.rows" :key="rowIndex">
      <td 
        v-for="(value, colIndex) in row" 
        :key="colIndex"
        style="width: 1%; border: 1px solid; text-align: center"
      >
        {{ value }}
      </td>
    </tr>
  </tbody>
</table>

方案优势 #

• 统一处理两种colVal结构，无需复杂条件判断
• 严格遵循HTML表格规范，避免布局异常
• 自动匹配每行的列值与对应表头，确保数据对应正确
• 兼容行数不一致的情况（缺失值显示空字符串）

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