Vue отображает целые строки таблицы только под заголовком первого столбца, вместо того, чтобы распределять ячейки под заголовками всех столбцов.

Question

Я пытаюсь визуализировать с помощью Vue динамическую таблицу с фиксированным заголовком. Строки отображаются с v-for с компонентом строки, а затем ячейки каждой строки отображаются с v-for с использованием некоторых компонентов ячейки (количество ячеек равно количеству <th> элементов в <thead>). Проблема в том, что 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>.

Answer 1

Поведение было вызвано классом CSS, прикрепленным к «display: flex».

Answer 2

Попробуйте это

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