Vue 仅在第一列标题下呈现表格整行，而不是将单元格分布在所有列标题下答案

【问题标题】：Vue renders table's whole rows under just first column's header instead of spreading the cells under all columns' headersVue 仅在第一列标题下呈现表格整行，而不是将单元格分布在所有列标题下
【发布时间】：2020-02-15 17:47:05
【问题描述】：

我正在尝试使用 Vue 呈现具有固定标题的动态表。行使用带有行组件的v-for 呈现，然后使用一些单元组件使用v-for 呈现每一行的单元（单元的数量等于<thead> 中的<th> 元素的数量）。问题是 Vue 似乎只在第一列内呈现整行，而不是相关列标题下的每个单元格。

我的代码：

<template>
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>          
    </thead>
    <tbody>
      <tr-component v-for="row in dataRows" :key="row.ID">
        <td-component v-for="cell in dataCells" :key="cell.ID"></td-component>
      </tr-component>
    </tbody>
  </table>
</template>

结果：

        Column 1         | Column 2 | Column 3
Cell 1 | Cell 2 | Cell 3 |

我做错了什么？这不是格式问题 - 更改单元格宽度会更改第 1 列的宽度。

PS。 <td> 组件中还有一些其他元素（div 等），但总是包裹在 <td> 中。

【问题讨论】：

我猜是tr-component的模板有问题。可以发一下吗？
给你：它看起来像这样<template> <tr class="record"> <component v-for="cell in dataCells" // dataCells is a prop passed from parent, array containing config data for cells :key="recordItem.userIndex" :is="recordItem.compName" ></component> </tr> </template>
我发现了一个罪魁祸首——这种行为是由使用“display: flex”附加到的 CSS 类引起的。感谢您尝试回答我的问题。

标签： vue.js html-table

【解决方案1】：

试试这个

<template v-for="row in dataRows">
    <tr-component :key="row.ID">
        <td-component v-for="cell in dataCells" :key="cell.ID"></td-component>
    </tr-component>
</template>

【讨论】：

我试图这样做。它似乎不起作用。另外我现在有一个问题，我不能将row 变量作为prop 值传递给。将:key="row.ID" 放入而不是模板是否有原因？是错字吧？
我必须实际使用它才能看到。如果密钥导致tr 出现问题，请尝试将其切换到template。
是的，我做到了。如果我把它放在<tr> 中，我会得到“属性或方法“行”未在实例上定义，但在渲染期间被引用”。但即使我把它放在<template> 和v-for 中，不仅行仍然在单元格1 内呈现，而且只有第一行（在dataRows 中的4 个元素中呈现）。我的代码呈现所有 4 行。
我发现了一个罪魁祸首——这种行为是由带有“display: flex”的附加的 CSS 类引起的。感谢您尝试回答我的问题。

【解决方案2】：

该行为是由附加到带有“display: flex”的 CSS 类引起的。

【讨论】：