Vue.js如何将嵌套动态数据渲染为带合并表头的HTML表格并解决行排列问题

问题出在getThirdLevel方法的数组构建逻辑上，你当前的逻辑是遍历每个Subheader列时，将该列时间数组的多个元素依次追加到当前行的末尾，才会出现多元素横向排列的问题。正确逻辑应该是先把每个Subheader对应的所有值合并为一个一维数组，再按行取每个列的对应位置元素，修改后的代码如下：

修改后的getThirdLevel方法 #

getThirdLevel() {
  const obj = this.fullCycle
  // 1. 先获取所有Subheader列对应的合并后一维数组
  const columnValues = []
  for (const headerKey of Object.keys(obj)) {
    for (const subHeaderKey of Object.keys(obj[headerKey])) {
      // 把当前Subheader下所有时间点的数组合并为一个一维数组
      const merged = Object.values(obj[headerKey][subHeaderKey]).flat()
      columnValues.push(merged)
    }
  }
  // 2. 计算最长的列长度，即表格需要的总行数
  const maxRowLen = Math.max(...columnValues.map(col => col.length))
  // 3. 逐行生成数据：第i行取每个列的第i个元素，不存在则填空
  const finalArray = []
  for (let rowIndex = 0; rowIndex < maxRowLen; rowIndex++) {
    const row = columnValues.map(col => col[rowIndex] ?? '')
    finalArray.push(row)
  }
  return finalArray
}

逻辑说明 #

1. 先把每个Subheader下所有时间点的数组合并拍平，比如示例中第一个Subheader合并后为[1,2,3,10,6]，第二个为[2,6,1,50,10]，第三个为[4,5,5,8,4]
2. 取所有列中最长的长度作为表格总行数，避免数据截断
3. 逐行生成时，每行依次取所有列对应下标的元素，没有值的位置默认填空字符串，保证结构和表头列数完全对齐

模板部分无需修改，原有表头colspan、Subheader渲染逻辑都可以正常复用。

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