Vue全选

<el-checkbox :indeterminate="pYIsIndeterminate" v-model="pYcheckAll" @change="pYhandleCheckAllChange">全选</el-checkbox>

              <el-checkbox-group class="check_group" v-model="pYcheckedCities" @change="planTypeChecked">

                <el-checkbox v-for="item in planTypeOptions" :label="item.planningTypeName" :key="item.planningTypeName">{{item.planningTypeName}}</el-checkbox>

              </el-checkbox-group>

 

/**

   * 全选

   */

  // 全选框状态

  private pYcheckAll = false

  // 类型选择之后的数据

  private pYcheckedCities = []

  // 半选框状态

  private pYIsIndeterminate = false

  // 选择包含的计划类型

private planTypeOptions = [

    {

      planningTypeName: '小明',

      id: '1'

    },

    {

      planningTypeName: '小红',

      id: '2'

    }

  ]

  pYhandleCheckAllChange(val: any) {

    this.planTypeOptions.forEach(item => {

      this.pYcheckedCities.push((item.planningTypeName))

    }),

    (this.pYcheckedCities as any) = val ? this.pYcheckedCities : [];

    this.pYIsIndeterminate = false;

  }

  // 选择后包含的计划类型

  // 选择包含的计划类型

  private planTypeChecked(value: any) {

    let checkedCount = value.length;

    this.pYcheckAll = checkedCount === this.planTypeOptions.length;

    this.pYIsIndeterminate = checkedCount > 0 && checkedCount < this.planTypeOptions.length;

    console.log('value', value)

  }