はじめに

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をカスタマイズする

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

チェックボックスのアイコンが小さい
並び替えと同時に、チェックボックスのアイコンも回ってしまう。
あと、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>

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

また、チェックするのに、チェックボックスのみをクリックする必要があります。
さらに、見出しをクリックすると並べ替えが優先されてしまいます。

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

見出しをクリックするとチェックを入れる
並び替えは、アローアイコンでのみ対応する

並び替えの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を勉強すればできるかな？