LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-21

課題

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

スクリーンショット 2020-08-21 17.28.25.png

失敗例

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0