iview Checkbox 默认全选失败

Question

`<template>

<div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
    <Checkbox
        :indeterminate="indeterminate"
        :value="checkAll"
        @click.prevent.native="handleCheckAll">全选</Checkbox>
</div>
<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
    <Checkbox label="香蕉"></Checkbox>
    <Checkbox label="苹果"></Checkbox>
    <Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>

</template>
<script>

export default {
    data () {
        return {
            indeterminate: true,
            checkAll: true,
            checkAllGroup: ['香蕉', '苹果','西瓜']
        }
    },
    methods: {
        handleCheckAll () {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

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

</script>
`
按照上面这么写，默认打开

全选不是勾选状态，我想让他勾选改怎么写？

Answer 1

我是不是可以理解为，你写了这么多，就是想改写下全选按钮前勾选框的样式