개요

코드

<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;
}