vue.js <table>を１次元配列のデータを元にv-forで表現する方法について

Question

前提・実現したいこと

list = [1,2,3,4,5,6,7,8,9,10,11,12]

上記のような配列データでv-forを用いて<table>を実装したいと考えています。
枠は固定にして、縦＊横を3*4の表にしたいです。

しかし、<td>タグをv-forで繰り返した場合、<tr>タグを任意のタイミングで切り替える方法が分かりません。
また、<tr>と<td>タグの両方にv-forを利用して、入子構造なども考えましたが、分かりませんでした。

イメージ(jsfiddle)としてはリンクのようなレイアウトを想定しています。

ご教授いただけますと幸いです。

Answer 1

理由があってデータ構造を2次元配列で持てないという場合、算出プロパティで1次元配列を2次元配列に展開するという方法があります。

下記はアイテム数が可変（増減する）し、且つ列数は4で固定という条件のサンプルコードです。
算出プロパティを使えばアイテム数の増減に対応してテーブルの描画も行われます。ただしアイテム数が変わるたびに2次元配列を作成しなおすというコストはかかりますので参考にされる際はご留意ください。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>a</th>
          <th>b</th>
          <th>c</th>
          <th>d</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(rows, rowIdx) in tableDatas" :key="rowIdx">
          <td v-for="(data, colIdx) in rows" :key="colIdx">
            {{ data }}
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="add">add</button>
    <button @click="sub">sub</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    }
  },
  methods: {
    add() {
      let item = this.items[this.items.length - 1] + 1
      this.items.push(item)
    },
    sub() {
      this.items.splice(this.items.length - 1, 1)
    }
  },
  computed: {
    tableDatas() {
      // 列数は固定
      const cols = 4
      // 行数はデータ数から計算
      const rows = Math.ceil(this.items.length / cols)
      // 行数 x 列数の2次元配列を作成
      const arrays = Array.from(new Array(rows), () => new Array(cols).fill(0))
      // 配列のデータをコピー
      this.items.forEach((item, index) => {
        const rowIdx = Math.floor(index / cols)
        const colIdx = index % cols
        arrays[rowIdx][colIdx] = item
      })
      return arrays
    }
  }
}
</script>

Comments

[kurimaron7]

大変参考になりました。
ありがとうございます。

Answer 2

通常の配列でテーブルの行の切り替えをなどをやろうとするとロジックが必要になりますが、listのデータ構造を2次元配列にすると以下のようにかけます。

<div id="app">
  <table>
    <tr v-for="row, i in rows" :key="i">
      <td v-for="num, j in row" :key="j">{{ num }}</td>
    </tr>
  </table>
</div>

new Vue({
  el: "#app",
  data: function() {
    return {
      rows: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [10, 11, 12]
      ]
    };
  }
});

サンプルコード