vueでチェックボックス全選択の作り方

概要

タイトルの通り、以下のようなチェックボックスを全て選択するチェックボックスを実装する方法

コード

テンプレート側

<el-row :gutter="24">
  <el-col :span="21" class="disability_name_area_allcheck"
    ><el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      :disabled="!selectRireki.isEditable"
      @change="checkAllObstacles"
      >すべて選択</el-checkbox
    >
  </el-col>
</el-row>
<el-row :gutter="24">
  <el-col :span="24" class="disability_name_area">
    <original-check-list
      v-model="selectedDisabilityCertificateData.body_disability_name"
      item-physical-name="body_disability_name"
      item-display-name=" "
      :option-list="obstaclesList"
      :input-required="false"
      :disabled-condition="!selectRireki.isEditable"
    ></original-check-list>
  </el-col>
</el-row>

スクリプト側

private isIndeterminate: boolean = false;
private checkAll: boolean = false;

checkAllObstacles(val: boolean) {
  if (!this.selectedDisabilityCertificateData) {
    return;
  }
  this.selectedDisabilityCertificateData.body_disability_name = val
    ? this.getObstaclesListKeys()
    : [];
  this.isIndeterminate = false;
}

@Watch("selectedDisabilityCertificateData.body_disability_name")
checkedObstaclesChange(value: Array<boolean>) {
  let checkedCount = value.length;
  this.checkAll = checkedCount === this.obstaclesList.length;
  this.isIndeterminate = checkedCount > 0 && checkedCount < this.obstaclesList.length;
}