Vue.jsで選択した項目によって表示内容が変わるtableを作ってみよう

はじめに

選択した項目によってtableの表示内容を切り替えたい。

さらにtable要素内のthead要素を固定してtbody要素をスクロール可能にしたい。

今回はそんな場合の対応方法をVue.jsで考えてみました。

こんにちは。クラウドソリューショングループのtakinami.sです。

というわけで、上の画像のような表を作っていきます。

 

動作確認環境

vue: 2.6.12

bootstrap: 4.5.0

 

今回は.vue拡張子の単一ファイルコンポーネントで書いていきます。

 

コードを見ていく

<script>の中身

単一ファイルコンポーネントでは<template>,<script>,<style>の順番で書いていかなくてはいけませんが、画面に表示させるデータを先に確認したいのでまずは<script>の中を見ていきます。

foodsという配列の中に項目として野菜・肉・果物を取り上げ、それぞれの種類と産地をまとめてみました。

isActiveではボタンでどの項目が選択されているのかを見ています。初期状態では０、つまり一番最初の項目が選択されている状態です。今回の場合は野菜が選択されていることになります。

 

<template>の中身

次に<template>の中身を見ていきましょう。

 

項目選択用のボタンはこのようになっています。

1つ目のポイントは

の部分です。

v-forを使ってリストレンダリングをしています。さらに、項目の順番が入るkeyを設定しています。

次のポイントは

の部分です。

keyには最初は0を入れ、<script>内で記述したisActiveの値とkeyの値が一致したらactiveというclassを追加するように設定しています。

 

続いて表の部分のコードも見ていきましょう。

Vue,jsを使うところで注目してほしいのは、

この3点です。

表の部分でもv-forのkeyを設定し、isActiveとkeyの値が一致したときに対応するtableを表示させています。

これでボタンで選択した項目によって、tableの表示内容を切り替えていくことができるようになりました。

 

さて、table全体を覆う

があることと、thead要素とtbody要素で別々のtable要素を使っていることに気がついたでしょうか。

これらがtbody要素のみをスクロールさせるときに活きてきます。

tbody要素を含むtableのほうにはbootstrapのoverflow-autoクラスを設定し、スクロールを可能にしています。

 

<style>の中身

今回はtable全体を覆うcover-tableクラスには418pxの幅を、tbody要素を含むtable要素のfood-tableクラスには400pxの幅を設定しました。

18pxの差がありますが、これはレイアウトが崩れないようスクロールバーの幅を考慮に入れているためです。

tbody要素の最大の高さは200pxに設定、セルの幅も200pxに設定しました。

これでtbody要素が200pxを超えるときにはtbody要素がスクロールできるようになります。

 

最後に

今回はbootstrapを使いましたが、もちろんスタイルはCSSで自分で設定することもできます。

最後に今回のコードの全体を載せておきます。