Vuetifyのv-simple-tableでcheckboxの機能を色々した件

仕様環境

• windows
• vue 2系
• nuxt 2系
• Vuetify 2系

v-simple-tableにcheckbokを追加し、複数、単体、全部のチェックが出来るように実装を
依頼されたため、その作業内容を備忘録として残します。

v-simple-tableの記事はほとんど無く、v-data-table使っているほうが多いのですね・・

今回はあくまで、APIで既にdataを取得している前提で進めていますのでご了承ください。

以下を参考資料にさせていただきました。
https://vuetifyjs.com/ja/

チェックボックスの実装

v-simple-tableにcheckbokを設置する。

これに関しては特に難しい所はありません。

<td>
   <template>
     <v-checkbox
       v-model="selectData"
       :value="Item"
       :id="Item + index"
       color="primary"
     />
   </template>
</td>             

上記の例のようにtrの中にtdで括ってしまえば簡単に設置できます。
header側にも同じく全選択用のチェックボックスを用意します。

<th>
  <v-checkbox
    v-model="checkAll"
    color="primary"
  />
</th>

ここからまず、computedを使い全選択と複数選択の切り替えが出来るように処理を記入します。
※apiListはAPIからのデータと思ってください

data(): DataType {
    return {      
      allChecked: false,
      selectData: [],
}

computed: {
	checkAll: {
	      get(): boolean {
		if (this.selectData.length == this.apiList.length) {
		  return true;
		} else {
		  return false;
		}
	      },
	      set(val: searchItem) {
		let checkArry: searchItem[] = [];
		if (val) {
		  this.apiList.forEach(function (item) {
		    checkArry.push(item);
		  });
		}
		this.selectData = checkArry;
	      },
	    },
}

ざっくりですが、こんな感じの実装で行けるかと。

さらにここから追加要望

テーブルの行をクリックして、checkbokを連動したい

これの追加が入りました。

結論から言うとtrにクリックイベントを仕込むのがよさそうでした。

下準備

<tr
  v-for="(Item, index) in apiList"
  :key="index"
  :value="Item"
  @click="clickRowItem(Item, index)"
>

クリックイベントに修飾子は必要なのかな・・と悩んでいます。
よろしければアドバイス頂ければと思います。

話を戻して、行のクリックは以下の実装にて完成させました。

clickRowItem(val: searchItem) {
      this.selectData;

      if (!this.selectData.includes(val)) {
        this.selectData.push(val);
      } else if (this.selectData) {
        let rowIndex = this.selectData.findIndex(
          (i) => i.userId === val.userId
        );
        this.selectData.splice(rowIndex, 1);
      }
},

ざっくりですが、こちらを備忘録として残します。
少し記述を変えなくてはいけないため、不備があるかもしれませんが、
誰かのお役に立てれば幸いです。