Vue.js のテンプレートで複数行にまたがる table の tr を表示する

課題

• Vue.js で複数行にまたがる<tr rowspan="x">を表示したい

失敗例

• <template>には1つの要素しか許可されていないため<tr>が複数記述できない

Table.vue

<template>
  <table>
    <tbody>
      <table-row v-for="row in rows" />
    </tbody>
  </table>
</tepmlate>

TableRow.vue

<template>
  <tr>
    <td rowspan="2">A</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</template>

成功例

• 複数の<tr>を<tbody>で囲うことで表示できるようになる

Table.vue

<template>
  <table>
    <table-row v-for="row in rows" />
  </table>
</tepmlate>

TableRow.vue

<template>
  <tbody> <!-- これで囲う -->
    <tr>
      <td rowspan="2">A</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody> <!-- これで囲う -->
</template>

知ってる人からしたら当たり前のことかもしれないけど、初心者の私には目からウロコでした