はじめに

Vue.jsというと、RouterやVuexを併用してSPAを作るものと思う方もいるかもしれませんが、
PHPなどでの同期処理やちょっとした非同期通信だけでも、いろいろな事ができます。
例えば、ユーザーのアクション（クリックやタップ婦）で動的に切り替わるUIなどです。

Vue単体でもいろいろ作れますが、BootstrapVueのようなフレームワークを追加すると、より簡単に色々なUIが作成できます。

今回は、バックエンドから割と好評だった表のサンプルを、備忘を兼ねて掲載します。

使用するもの

＊より簡単にやるために、BootstrapVue を使用しています。
また、元はBootstrapなので、デザイナーさんがstyleを設定しやすいという事もあります。

自分でwebpackで設定したり、VueCLI などで簡単に作っても良いです。
https://cli.vuejs.org/

とりあえずこのサンプルでは、ブラウザで読み込んでしまいます。
（一番手っ取り早い方法でもあります）

参考はこちら。
https://bootstrap-vue.js.org/docs#browser
上記のサンプルだとIntersectionObserverのpollyfillをloadしていますが、大抵は無くても大丈夫です。

表を作るコンポーネントはこちらになります。
BootstrapVueのコンポーネントになります。

プロパティはいろいろありますが、まずはこの２つです。
データを表示する表であれば、これだけで十分です。

表に表示するのデータ本体です。
このプロパティにデータをArrayで渡します。
またデータのArrayは、Key:ValueのObjectになります。

// sample
[
  { 
    age: 40,
    name: 'admin1',
    email: 'hoge@for.jp'
  },
  ...
]

fieldsは「見出し」になります。HTMLでのthです。
これもArrayで渡します。

// sample
[
  {
    key: 'name',
    label: 'Name'
  },
]

keyはitemsのObjectのKeyになります。
labelは見出しとして表示するデータになります。
fieldsのkeyの値と、items内のObjectのkeyがマッチすると見出しとして表示されます。

＊「表サンプル」を見てください

---

こんな時は、fieldsから表示したくないkey:valueを削除する事で対応できます。

＊「年齢非表示サンプル」を見てください

See the Pen bootstrap-vue b-table sample by H.N (@H_Naito) on CodePen.

まずソートの場合は、fieldsにsortableの追加で対応できます。
sortableを追加した列がソート対象になります。

一部のセルにHTMLを入れたい、例えばリンクしたい場合などはもう少しコードの追加が必要になります。
下記のコードで、セルを指定して表示したいデータとHTMLを設定します。
下記では、emailのセルにmailtoのリンクを設置しています。

        <template v-slot:cell(email)="data">
          <a :href="`mailto:${data.item.email}`">{{ data.item.email}}</a>
        </template>

＊「リンクとソート機能付き」を見てください

Sorting
https://bootstrap-vue.js.org/docs/components/table/#sorting

普通にtableを書くと、table要素からtr、ht、tdを記述して、そこにloop設定してとなりますが、結構簡単に作れると思います。
他にもいろいろなプロパティがありますので、何かのプロジェクト等で利用してみてください。

閲覧ありがとうございました。