elementチェックボックス全選択

8408 ワード

<el-checkbox 
    :indeterminate="checkList.indeterminate" 
    v-model="checkList.checkAll" 
    @change="checkAllChange">
      
</el-checkbox>
<el-checkbox-group 
    v-model="checkList.checkValue" 
    @change="checkChange">
    <el-checkbox 
    	v-for="i in checkList.list" 
        :label="i.key" 
        :key="i.key">
        {{i.name}}
    </el-checkbox>
</el-checkbox-group>
<script>
        return {
            //  
            checkList:{
             	indeterminate:true,
	            checkAll: false,    //       
	            list:[
	            	{
						name:"  1",
						key:"1"
					},
					{
						name:"  2",
						key:"2"
					}
				],        //     
	            checkValue:[],    //       
			}        
        }
    
        //  change
        checkAllChange(val) {
            let list = []
            this.checkList.list.forEach(function(item){
                list.push(item.key)
            })
            this.checkList.checkValue = val ? list : [];  
            this.checkList.indeterminate = false;
        },
        //   change
        checkChange(value) {
            console.log(value)
            console.log(this.checkList.checkValue)
            let checkedCount = value.length;
            this.checkList.checkAll = checkedCount === this.checkList.list.length;
            this.checkList.indeterminate = checkedCount > 0 && checkedCount < this.checkList.list.length;
	}
</script>