v-data-tableでcheckboxをdisabledにしたときの全選択カスタマイズ

はじめに

Vuetifyのv-data-tableにおいて、下記条件を満たすサンプルです。

• チェックボックスを表示する
• チェックボックスの一部をdisabledにする
• チェックボックスの全選択時、disabledの列を除外する

環境

• vue.js : 2.6.11
• vue/cli：5.0.4
• vuetify：2.6.0

サンプル

表示が崩れるので、拡大率0.5倍での確認 or CodePenで実物確認のほうがわかりやすいです。

See the Pen Vuetify Datatable disable row in selectAll by けぱ (@k2491p) on CodePen.

サンプル解説

大切な点は下記2点です。

1. disabledとしている行をカウントしておく
2. 全選択ボタン押下時、disabledを除いたものを全選択対象とする

1. disabledとしている行をカウントしておく

watch: {
    desserts: {
      handler: function () {
        this.disabledCount = 0;
        this.desserts.map((item) => {
          if (item.disabled) this.disabledCount += 1;
        });
      },
      deep: true
    }
  }

2. 全選択ボタン押下時、disabledを除いたものを全選択対象とする

selectAllToggle(props) {
    if (this.selected.length != this.desserts.length - this.disabledCount) {
    this.selected = [];
    props.items.forEach((item) => {
        if (!item.disabled) this.selected.push(item);
    });
    } else {
    this.selected = [];
    }
},

尚、サンプルではdisabledとなる行が変更することを想定して、disabledCountをwatchで監視するようにしています。
また、disabledを変更できるよう行クリックイベントを仕込んであります。

ソースなど

参考