Nuxt(vue)でtableを実装する際、指定した行ごとに見出し役のtrを出したい。

はじめに

表組みの行を複数表示したい。見出しも10回につき1回出したい。
そんな場合、trのv-forだけでは実装できずにいましたが、
templateを使うことで、それらが実装できることがわかりました。

このtemplateを使えば、見出しが複数行に渡る複雑なtableも、実装できるかもしれません。

ゴール

コード

vue

<template>
  <div>
    <table>
      <table>
        <tbody>
          <template v-for="n in 15">
            <tr v-if="n % 10 === 1" :key="n">
              <th>見出しA</th>
              <th>見出しB</th>
              <th>見出しC</th>
            </tr>
            <tr :class="{even:n % 2 === 0,odd:n % 2 === 1}" :key="n">
              <td>A-{{ n }}</td>
              <td>B-{{ n }}</td>
              <td>C-{{ n }}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </table>
  </div>
</template>

<style>
table {
  width: 100%;
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  word-break: break-word;
  border-spacing: 0;
}
th {
  font-weight: normal;
  background: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 1px 1px 0 0 #fff inset, -1px -1px 0 0 #fff inset;
  padding: 4px 12px;
  white-space: nowrap;
  font-weight: bold;
}
td {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 1px 1px 0 0 #fff inset, -1px -1px 0 0 #fff inset;
  padding: 4px 12px;
}
.even {
  background-color: #fafafa;
}
</style>

[その他]参考記事

https://qiita.com/horikeso/items/0d7a739060079e08d01c