Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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を勉強すればできるかな?

idani
井谷(いだに)と申します。 前職では、cakePHPとjQueryとVue.jsを使って、メール配信、SMS配信、セミナー募集システム、かんたんな決済処理、アフィリエイトシステムなどを開発していました。 使える言語は、C、C++、Perl、C#、PHP、JSになります。 昔々、Gentoo Linuxの翻訳作業をしていました。
https://hirotae.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away