はじめに
Vue.jsというと、RouterやVuexを併用してSPAを作るものと思う方もいるかもしれませんが、
PHPなどでの同期処理やちょっとした非同期通信だけでも、いろいろな事ができます。
例えば、ユーザーのアクション（クリックやタップ婦）で動的に切り替わるUIなどです。
Vue単体でもいろいろ作れますが、BootstrapVueのようなフレームワークを追加すると、より簡単に色々なUIが作成できます。
今回は、バックエンドから割と好評だった表のサンプルを、備忘を兼ねて掲載します。
使用するもの
Vue.js (https://jp.vuejs.org/)
BootstrapVue (https://bootstrap-vue.js.org/)
＊より簡単にやるために、BootstrapVue を使用しています。
また、元はBootstrapなので、デザイナーさんがstyleを設定しやすいという事もあります。
作り方
Buildの環境をつくる
自分でwebpackで設定したり、VueCLI などで簡単に作っても良いです。
https://cli.vuejs.org/
ブラウザで読み込む（script要素利用）
とりあえずこのサンプルでは、ブラウザで読み込んでしまいます。
（一番手っ取り早い方法でもあります）
参考はこちら。
https://bootstrap-vue.js.org/docs#browser
上記のサンプルだとIntersectionObserverのpollyfillをloadしていますが、大抵は無くても大丈夫です。
表を作る
表のコンポーネント
表を作るコンポーネントはこちらになります。
BootstrapVueのコンポーネントになります。
b-table
https://bootstrap-vue.js.org/docs/components/table/
b-tableのプロパティ
プロパティはいろいろありますが、まずはこの２つです。
データを表示する表であれば、これだけで十分です。
items
表に表示するのデータ本体です。
このプロパティにデータをArrayで渡します。
またデータのArrayは、Key:ValueのObjectになります。
// sample
[
{
age: 40,
name: 'admin1',
email: 'hoge@for.jp'
},
...
]
fields
fieldsは「見出し」になります。HTMLでのthです。
これもArrayで渡します。
// sample
[
{
key: 'name',
label: 'Name'
},
]
keyはitemsのObjectのKeyになります。
labelは見出しとして表示するデータになります。
fieldsのkeyの値と、items内のObjectのkeyがマッチすると見出しとして表示されます。
サンプル
＊「表サンプル」を見てください
See the Pen bootstrap-vue b-table sample by H.N (@H_Naito) on CodePen.
---ちょっとした応用
特定のデータを非表示にしたい。でもitemsを変更したくない
こんな時は、fieldsから表示したくないkey:valueを削除する事で対応できます。
サンプル
＊「年齢非表示サンプル」を見てください
See the Pen bootstrap-vue b-table sample by H.N (@H_Naito) on CodePen.
ソートつけたい、一部にHTMLを追加したい
まずソートの場合は、fieldsにsortableの追加で対応できます。
sortableを追加した列がソート対象になります。
一部のセルにHTMLを入れたい、例えばリンクしたい場合などはもう少しコードの追加が必要になります。
下記のコードで、セルを指定して表示したいデータとHTMLを設定します。
下記では、emailのセルにmailtoのリンクを設置しています。
<template v-slot:cell(email)="data">
<a :href="`mailto:${data.item.email}`">{{ data.item.email}}</a>
</template>
サンプル
＊「リンクとソート機能付き」を見てください
See the Pen bootstrap-vue b-table sample by H.N (@H_Naito) on CodePen.
参考
Tables
https://bootstrap-vue.js.org/docs/components/table/
Sorting
https://bootstrap-vue.js.org/docs/components/table/#sorting
Custom data rendering
https://bootstrap-vue.js.org/docs/components/table/#custom-data-rendering
普通にtableを書くと、table要素からtr、ht、tdを記述して、そこにloop設定してとなりますが、結構簡単に作れると思います。
他にもいろいろなプロパティがありますので、何かのプロジェクト等で利用してみてください。
閲覧ありがとうございました。