Vue.js Vue渲染表'；在第一列'；s标题，而不是将单元格分散在所有列下'；标题

我正在尝试使用Vue渲染具有固定标题的动态表。使用带有行组件的

v-for

渲染行，然后使用一些单元格组件（单元格数量等于

中的

元素数量）使用

v-for

渲染每行的单元格。问题是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>

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

PS.

组件中有一些其他元素（div等），但总是包装在

中

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

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

我猜这是

tr组件的模板中的一个问题。您可以发布吗？给您：看起来像这样的
我发现了一个罪魁祸首-该行为是由附加到带有“display:flex”的CSS类引起的。谢谢你试着回答我的问题。我试着这么做了。它似乎不起作用。此外，我现在有一个问题，我无法将
行
变量作为prop值传递到。是否有理由将
：key=“row.ID”
放入not模板？这是一个打字错误，对吧？我得好好玩玩才能看到。如果该键在
tr
中导致问题，请尝试将其切换到
模板。是的，我这样做了。如果我把它放在
中，我会得到“属性或方法”行“不是在实例上定义的，而是在渲染过程中引用的”。但是，即使我用
v-for
将其放入
中，不仅行仍在单元格1中呈现，而且仅第一行（dataRows中的4个元素中的第1行被呈现）。我的代码呈现了所有4行。我发现了一个罪魁祸首-该行为是由附加到带有“display:flex”的CSS类引起的。谢谢你试着回答我的问题。
<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>