Edited at

Vuetifyのv-data-tableの見出し(ヘッダー)にチェックボックスをつける


はじめに

Vuetifyのv-data-tableを使って実装を進めています。

見出し行にチェックボックスをつけたい場合にどうしたかをメモしておきます。


完成形


See the Pen
Vuetify table checkbox サンプル
by Shigehiro IDANI (@1da2)
on CodePen.


メモ


データテーブルの見出しにチェックボックスをつける

まず、データテーブルの見出し行(ヘッダー)をカスタマイズしますので、

VuetifyのData tablesのサンプルにある、「スロット: items と headers」を参考にします。

こちらは、チェックボックスのカラムが追加されていましたので、追加部分を削除し、「v-checkbox」をヘッダーの項目に移動します。

以下のような感じです。


See the Pen
Vuetify Example Pen
by Shigehiro IDANI (@1da2)
on CodePen.

このままですと、チェックボックスが小さくなります。

これは見出し行でソートする場合の矢印アイコンを小さくするためのCSSの影響になります。


チェックボックスのCSSをカスタマイズする

この状態ですと、以下の問題が発生します。


  1. チェックボックスのアイコンが小さい

  2. 並び替えと同時に、チェックボックスのアイコンも回ってしまう。

  3. あと、Hoverするまで、チェックボックスが見えない。

このため、以下のCSSを追加します。

.myCheckBox .v-icon {

opacity: 0.6 !important;
font-size: 24px !important;
transform: none !important;
}

アイコンが小さいのは、font-sizeで対応。

アイコンが回るのは、transformで対応

Hoverまで見えないのは、opacityで対応

そして、v-checkboxのClassに「myCheckBox」を追加します。


See the Pen
Vuetify Example Pen
by Shigehiro IDANI (@1da2)
on CodePen.



チェックボックスが正しく動くようにする

Checkboxes - Array

の記事を参考に調整します。

今回は見出し行を複数選択したいので、Arrayです。

checkboxにv-modelでArrayを紐付ければよいので、以下のようにします。

また、チェックをした場合に、見出し行、それぞれで異なるValueを指定できるようにします。

             <v-checkbox

v-model="selected"
:value="header.value"
primary
hide-details
class="myCheckBox"
></v-checkbox>

このままですと、チェックボックスと見出しの部分が斜めに離れています。

2019-03-03_17h34_00.png

また、チェックするのに、チェックボックスのみをクリックする必要があります。

さらに、見出しをクリックすると並べ替えが優先されてしまいます。

このため以下のように変更します。


  • 見出しをクリックするとチェックを入れる

  • 並び替えは、アローアイコンでのみ対応する


並び替えのv-onの位置を変更

並び替えのアクションである「v-on:click」は、thにバインドされていますので、これをアローアイコンを示す、v-iconに移動します。


変更前

         <th

v-for="header in props.headers"
:key="header.text"
:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
@click="changeSort(header.value)"
>
<v-checkbox
v-model="selected"
:value="header.value"
primary
hide-details
class="myCheckBox"
></v-checkbox>

<v-icon small>arrow_upward</v-icon>
{{ header.text }}
</th>



変更後

         <th

v-for="header in props.headers"
:key="header.text"
:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
>
<v-checkbox
v-model="selected"
:value="header.value"
primary
hide-details
class="myCheckBox"
></v-checkbox>

<v-icon @click="changeSort(header.value)" small>arrow_upward</v-icon>
{{ header.text }}
</th>



チェックボックスでラベル表示

名前でチェックできるように、v-checkboxのlabelプロパティに、見出し情報を移します。


変更後

         <th

v-for="header in props.headers"
:key="header.text"
:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
>
<v-checkbox
v-model="selected"
:value="header.value"
:label="header.text"
primary
hide-details
class="myCheckBox"
></v-checkbox>
<v-icon @click="changeSort(header.value)" small>arrow_upward</v-icon>
</th>


チェックアイコンがクリックできない。

v-checkboxのラベルはクリックできますが、チェックアイコンはクリックできません。

本家コミュニティで聞いてみたところ、自分でウォッチャーしてくださいってことでした。

「ウォッチャーって何?」と思いましたが、独自にv-on:clickを仕込めばいいようです。

v-checkboxをspanタグでくるんで、spanタグにv-on:clickを仕込んで対応しました。

また、これをしちゃうと、ラベルのクリックが反応しなくなっちゃうので、ラベルもslotで外出にしました。


See the Pen
Vuetify table checkbox サンプル
by Shigehiro IDANI (@1da2)
on CodePen.


問題点

チェックボックスの色が薄いので、チェックがつくと濃くしたいなぁ。

CSSを勉強すればできるかな?