Vuetify2.xでv-data-tableで行クリックと操作列追加

Vuetify2.xで変更されたV-Data-Tableをカスタマイズするときのメモ

概要

Vuetify1.5から2.2にあげたらV-Data-Tableの書き方が変わっていた。
1.5→2.0にあげた例を参考にさせていただいた。
V-Data-Tableに関しては、リンク先にあるようにカラム指向になったようなイメージでtemplateの書き方がかわったようだった。
最初はV-Data-Iteratorでまわして自力でTableを構築する必要があるのかな、とおもったが公式ドキュメントに例があったので、参照しつつ解決したときのメモ。

行クリック

ドキュメントのAPI欄にさりげなく click:row とあったので試した。

単にイベントに関数を割り当てるだけでよかった。

抜粋：

vue

<template lang="pug">
  v-data-table(
   :headers="headers"
   :items="db"
   hide-default-footer
   @click:row="clickRow"
  )
</template>
<script>
  export default {
    name: "List",
    data: () => ({
      headers: [
       {text:'ID', value:'id'},
       {text:'なかまたち', value:'name'}
      ],
      db: [
        {id:1, name:'ブタさん'},
        {id:2, name:'ウサギさん'},
        {id:3, name:'キツネさん'},
        {id:4, name:'ゾウさん'}
      ]
    }),
    methods: {
      clickRow(row) {
        console.log(row.name) // 1 => ブタさん...
      }
    }
</script>

1行ごとに操作アイコンなどデータ以外の列を表示

公式ドキュメントの例どおりに

1. ヘッダー列定義に操作用の列を追加
2. templateで操作列を定義

ヘッダ列への追加

vueスクリプト抜粋

    data: () => ({
      headers: [
       {text:'ID', value:'id'},
       {text:'なかまたち', value:'name'},
       {text:'操作', value:'action'}
      ],
～～～

表示用template

vueのtemplate

<template lang="pug">
  v-data-table(
   :headers="headers"
   :items="db"
   hide-default-footer
   @click:row="clickRow"
  )
    // 各行・列の描画はよろしくやってくれるので操作列だけ記述すればよい
    template(v-slot:item.action="{item}")
       v-btn(@click="showName(item.name)")
         v-icon fa-home
</template>
<script>
(略)
    showName(str) {
      console.log(str)
    }
(略)
</script>

まとめ

どうかけばいいのか調べるのに時間がかかったけど、結局公式ドキュメントをみて試してなんとかなった。
簡潔にかけるので1.5よりも楽じゃないだろうか。
特定の列だけ表示方法をかえるというのも例のとおりでなんとかなるのだろう。

上記例、それぞれなら問題ないが、行クリックと、操作ボタンを両方設定したいた場合、どちらも同時に実行される部分は未解決（ぐぬぬ）