Vue仅在第一列的标题下呈现表的整个行，而不是在所有列的标题下散布单元格

Question

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

我的代码：

<thead>

结果：

<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>

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

PS。 Column 1 | Column 2 | Column 3 Cell 1 | Cell 2 | Cell 3 | 组件中还包含其他一些元素（divs等），但始终包裹在<td>中。

Answer 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>

Answer 2

此行为是由附加到“ display：flex”的CSS类引起的。