iview checkbox demo（文档改写）

<template>
<div class="content">
    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        <Checkbox
            :indeterminate="indeterminate"
            :checked="checkAll"
            @on-change="handleCheckAll">全选</Checkbox>
    </div>
    <CheckboxGroup v-model="checkAllGroup"  @on-change="checkAllGroupChange">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
    </CheckboxGroup>
</div>
</template>
<script>
    export default {
        data () {
            return {
                indeterminate: false,
                checkAll: false,
                checkAllGroup: ['香蕉', '西瓜']
            }
        },
        methods: {
            handleCheckAll () {
                if (!this.indeterminate) {
                    this.checkAll = true;
                    this.indeterminate = true;
                }else {
                    this.checkAll = !this.checkAll;
                     this.indeterminate = false;
                }
                

                if (this.checkAll) {
                    this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
                } else {
                    this.checkAllGroup = [];
                }
            },
            checkAllGroupChange (data) {
                if (data.length === 3) {
                    this.indeterminate = true;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = false;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        }
    }
</script>

<template>

<div class="content">

<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">

<Checkbox

:indeterminate="indeterminate"

:checked="checkAll"

@on-change="handleCheckAll">全选</Checkbox>

</div>

<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">

<Checkbox label="香蕉"></Checkbox>

<Checkbox label="苹果"></Checkbox>

<Checkbox label="西瓜"></Checkbox>

</CheckboxGroup>

</div>

</template>

<script>

export default {

data () {

return {

indeterminate: false,

checkAll: false,

checkAllGroup: ['香蕉', '西瓜']

}

},

methods: {

handleCheckAll () {

if (!this.indeterminate) {

this.checkAll = true;

this.indeterminate = true;

}else {

this.checkAll = !this.checkAll;

this.indeterminate = false;

}

 

if (this.checkAll) {

this.checkAllGroup = ['香蕉', '苹果', '西瓜'];

} else {

this.checkAllGroup = [];

}

},

checkAllGroupChange (data) {

if (data.length === 3) {

this.indeterminate = true;

this.checkAll = true;

} else if (data.length > 0) {

this.indeterminate = false;

this.checkAll = false;

} else {

this.indeterminate = false;

this.checkAll = false;

}

}

}

}

</script>