[JavaScript知识库]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)

? }