vue 多选框 全选

<template>
    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        // 全选按钮的部分
        <Checkbox
            // value来判断是否点亮全选框
            :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 {
                checkAll: false,
                // 初始默认有选中的对象
                checkAllGroup: ['香蕉', '西瓜']
            }