Vuejsでテーブルの作成方法

2022/12/07 2 分で読める

Vue.jsで10*10のテーブルを作成する方法は以下のようになります。

まず、HTMLを次のように書きます。

<div id="app">
  <table>
    <tr v-for="(row, rowIndex) in 10" :key="rowIndex">
      <td v-for="(column, columnIndex) in 10" :key="columnIndex">
        {{ rowIndex * 10 + columnIndex }}
      </td>
    </tr>
  </table>
</div>

const app = new Vue({
  el: '#app',
  data: {
  }
})

const app = new Vue({
  el: '#app',
  data: {
    filterText: '' // フィルタする文字列
  },
  computed: {
    // フィルタされたテーブルを返す算出プロパティ
    filteredTable() {
      // 空文字ならば全ての行を返す
      if (!this.filterText) return this.table

      // フィルタ文字列を含む行だけを返す
      return this.table.filter(row => row.some(column => column.includes(this.filterText)))
    }
  }
})

これを用いて、テーブルをフィルタすることができます。

<div id="app">
  <input v-model="filterText" placeholder="フィルタ文字列を入力">
  <table>
    <tr v-for="(row, rowIndex) in filteredTable" :key="rowIndex">
      <td v-for="(column, columnIndex) in row" :key="columnIndex">
        {{ column }}
      </td>
    </tr>
  </table>
</div>

この例では、フィルタ文字列を含むセルだけが表示されます。

上記のプログラムに一部のカラムの表示非表示機能を追加する方法は以下のようになります。

まず、dataオブジェクトにカラムの表示非表示の状態を保持するvisibleColumnsプロパティを追加します。このプロパティは、各カラムに対応する値がtrueならば表示、falseならば非表示となるように設定します。

data: {
  filterText: '', // フィルタする文字列
  visibleColumns: [true, true, true, true, true, true, true, true, true, true] // 各カラムの表示非表示の状態
}

次に、テーブルを描画する際に、visibleColumnsプロパティの値に応じてカラムの表示非表示を切り替えるようにします。

<table>
  <tr v-for="(row, rowIndex) in filteredTable" :key="rowIndex">
    <td v-for="(column, columnIndex) in row" :key="columnIndex" v-if="visibleColumns[columnIndex]">
      {{ column }}
    </td>
  </tr>
</table>

ここで、v-ifディレクティブを用いて、visibleColumnsプロパティの値がtrueならばカラムを表示するようにしています。

最後に、カラムの表示非表示の状態を切り替えるためのボタンを追加します。以下は、その方法の例です。

<button v-for="(column, columnIndex) in visibleColumns" :key="columnIndex" @click="toggleColumnVisibility(columnIndex)">
  {{ column ? '非表示' : '表示' }}
</button>

このボタンをクリックすることで、対応するカラムの表示非表示の状態が切り替わります。

methods: {
  toggleColumnVisibility(columnIndex) {
    this.visibleColumns[columnIndex] = !this.visibleColumns[columnIndex]
  }
}

Vuejsでテーブルの作成方法

Nakano

Back-end engineer