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: ['香蕉', '西瓜']
            }
        },
        methods: {
            // 点击全选后，给参数字段赋值全部对象
            handleCheckAll () {
                
                this.checkAll = !this.checkAll;
                
                // 如果使用的是push 记得先置空 this.checkAllGroup = []

                if (this.checkAll) {
                    this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
                } else {
                    this.checkAllGroup = [];
                }
            },
            // 单个选中的时候，实时监控是否已经全部选中了
            checkAllGroupChange (data) {
                if (data.length === 3) {
                    this.checkAll = true;
                } else {
                    this.checkAll = false;
                }
            }
        }
    }
</script>

如果需要进入页面有被选中的部分，则增加created或者mounted对this.checkAllGroup进行赋值即可