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>の中を見ていきます。
export default {
data() {
return {
isActive: 0,
foods: [
{
category: "野菜",
kinds: [
{
name: "じゃがいも",
place: "北海道"
},
{
name: "人参",
place: "北海道"
},
{
name: "大根",
place: "神奈川県"
},
{
name: "トマト",
place: "熊本県"
},
]
},
{
category: "肉",
kinds: [
{
name: "豚肉",
place: "鹿児島県"
},
{
name: "鶏肉",
place: "宮崎県"
},
{
name: "牛肉",
place: "北海道"
},
{
name: "猪肉",
place: "兵庫県"
},
]
},
{
category: "果物",
kinds: [
{
name: "りんご",
place: "青森県"
},
{
name: "梨",
place: "千葉県"
},
{
name: "みかん",
place: "和歌山県"
},
{
name: "桃",
place: "山梨県"
},
{
name: "りんご",
place: "青森県"
},
{
name: "梨",
place: "千葉県"
},
{
name: "みかん",
place: "和歌山県"
},
{
name: "桃",
place: "山梨県"
},
{
name: "りんご",
place: "青森県"
},
{
name: "梨",
place: "千葉県"
},
{
name: "みかん",
place: "和歌山県"
},
{
name: "桃",
place: "山梨県"
},
]
},
]
}
}
}
foodsという配列の中に項目として野菜・肉・果物を取り上げ、それぞれの種類と産地をまとめてみました。
isActiveではボタンでどの項目が選択されているのかを見ています。初期状態では０、つまり一番最初の項目が選択されている状態です。今回の場合は野菜が選択されていることになります。
<template>の中身
次に<template>の中身を見ていきましょう。
項目選択用のボタンはこのようになっています。
<div class="btn-group btn-group-toggle mb-3">
<label class="btn btn-outline-primary"
v-for="(btnItem, key) in foods" :key="key"
:class="[key == 0 ? {active: isActive == key} : '', {active: isActive == key}]">
<input type="radio" :value="key" v-model="isActive">{{ btnItem.category }}
</label>
</div>
1つ目のポイントは
v-for="(btnItem, key) in foods" :key="key"
の部分です。
v-forを使ってリストレンダリングをしています。さらに、項目の順番が入るkeyを設定しています。
次のポイントは
:class="[key == 0 ? {active: isActive == key} : '', {active: isActive == key}]">
の部分です。
keyには最初は0を入れ、<script>内で記述したisActiveの値とkeyの値が一致したらactiveというclassを追加するように設定しています。
続いて表の部分のコードも見ていきましょう。
<div class="cover-table">
<table class="table table-border border mb-0 food-table">
<thead>
<tr>
<th class="food-name border-right">名前</th>
<th class="food-place">産地</th>
</tr>
</thead>
</table>
<div class="overflow-auto table-body" v-for="(item, key) in foods" :key="key">
<table class="table table-border border food-table" v-show="isActive == key">
<tbody>
<tr v-for="(tableItem, key) in item.kinds" :key="key">
<td class="food-name border-right">{{ tableItem.name }}</td>
<td class="food-place">{{ tableItem.place }}</td>
</tr>
</tbody>
</table>
</div>
</div>
Vue,jsを使うところで注目してほしいのは、
<div class="overflow-auto table-body" v-for="(item, key) in foods" :key="key">
<table class="table table-border border food-table" v-show="isActive == key">
<tr v-for="(tableItem, key) in item.kinds" :key="key">
この3点です。
表の部分でもv-forのkeyを設定し、isActiveとkeyの値が一致したときに対応するtableを表示させています。
これでボタンで選択した項目によって、tableの表示内容を切り替えていくことができるようになりました。
さて、table全体を覆う
<div class="cover-table">
があることと、thead要素とtbody要素で別々のtable要素を使っていることに気がついたでしょうか。
これらがtbody要素のみをスクロールさせるときに活きてきます。
tbody要素を含むtableのほうにはbootstrapのoverflow-autoクラスを設定し、スクロールを可能にしています。
<style>の中身
<style scoped>
.cover-table {
width: 418px;
}
.table-body {
max-height: 200px;
}
.food-table {
width: 400px;
}
.food-name, .food-place {
width: 200px;
}
</style>
今回はtable全体を覆うcover-tableクラスには418pxの幅を、tbody要素を含むtable要素のfood-tableクラスには400pxの幅を設定しました。
18pxの差がありますが、これはレイアウトが崩れないようスクロールバーの幅を考慮に入れているためです。
tbody要素の最大の高さは200pxに設定、セルの幅も200pxに設定しました。
これでtbody要素が200pxを超えるときにはtbody要素がスクロールできるようになります。
最後に
今回はbootstrapを使いましたが、もちろんスタイルはCSSで自分で設定することもできます。
最後に今回のコードの全体を載せておきます。
<template>
<div>
<div class="btn-group btn-group-toggle mb-3">
<label class="btn btn-outline-primary" v-for="(btnItem, key) in foods" :key="key" :class="[key == 0 ? {active: isActive == key} : '', {active: isActive == key}]">
<input type="radio" :value="key" v-model="isActive">{{ btnItem.category }}
</label>
</div>
<div class="cover-table">
<table class="table table-border border mb-0 food-table">
<thead>
<tr>
<th class="food-name border-right">名前</th>
<th class="food-place">産地</th>
</tr>
</thead>
</table>
<div class="overflow-auto table-body" v-for="(item, key) in foods" :key="key">
<table class="table table-border border food-table" v-show="isActive == key">
<tbody>
<tr v-for="(tableItem, key) in item.kinds" :key="key">
<td class="food-name border-right">{{ tableItem.name }}</td>
<td class="food-place">{{ tableItem.place }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: 0,
foods: [
{
category: "野菜",
kinds: [
{
name: "じゃがいも",
place: "北海道"
},
{
name: "人参",
place: "北海道"
},
{
name: "大根",
place: "神奈川県"
},
{
name: "トマト",
place: "熊本県"
},
]
},
{
category: "肉",
kinds: [
{
name: "豚肉",
place: "鹿児島県"
},
{
name: "鶏肉",
place: "宮崎県"
},
{
name: "牛肉",
place: "北海道"
},
{
name: "猪肉",
place: "兵庫県"
},
]
},
{
category: "果物",
kinds: [
{
name: "りんご",
place: "青森県"
},
{
name: "梨",
place: "千葉県"
},
{
name: "みかん",
place: "和歌山県"
},
{
name: "桃",
place: "山梨県"
},
{
name: "りんご",
place: "青森県"
},
{
name: "梨",
place: "千葉県"
},
{
name: "みかん",
place: "和歌山県"
},
{
name: "桃",
place: "山梨県"
},
{
name: "りんご",
place: "青森県"
},
{
name: "梨",
place: "千葉県"
},
{
name: "みかん",
place: "和歌山県"
},
{
name: "桃",
place: "山梨県"
},
]
},
]
}
}
}
</script>
<style scoped>
.cover-table {
width: 418px;
}
.table-body {
max-height: 200px;
}
.food-table {
width: 400px;
}
.food-name, .food-place {
width: 200px;
}
</style>
