vuetifyのv-data-tableによる列ごとの表示、非表示の実装

Question

ざっくりした質問になってしまいますが、もしどなたかご回答いただけると助かります。
vuetifyのv-data-tableを使ってデータテーブルを作りました。それにトグルUIによってカラムの表示、非表示を実装したいです。

↑こんな感じのUIです。

vuetifyのプロパティにはなさそうだったので、v-showで実装しようとしてもheaderにv-showの定義ができず、うまくいきません。
実装のサンプルとかもしどなたかご存知でしたらご教示いただけると大変幸いです。

よろしくおねがいします。

Answer 1

Data table - Vuetify.js
を参考にすると、例えば以下のような方針で実現できます。

1. 各コラムの表示/非表示を表す変数をdataに用意
2. v-data-tableのheaders propには表示してほしいコラムだけ渡す
3. items propはそのままで、items scoped slotの<template>の中で該当するデータだけ表示する

Demo

Scoped Slots - Vue.js

今の場合、{ item: object", index: number", selected: boolean", expanded: boolean" }がitemsスロットにpropsとして与えられるとv-data-tableのAPIに書いてあるので、それを{ item }とdestructureすることでitemを受け取っています。

Comments

[takeshi.kikuchi]

karamarimo様

ありがとうございました! 助かりました!