Vue Checkbox全选和选中的方法

<div class="search-content">
    <Checkbox :value="checkAll" @click.prevent.native="handleCheckAll">全部</Checkbox>
    <Checkbox-group v-model="checkGroup" @on-change="checkGroupChange">
        <Checkbox v-for="(item, index) in list" :label="item.name" :key="item.code">
            <span :title="item.name">{{item.name}}</span>
        </Checkbox>
    </Checkbox-group>
</div>

<script>
    export default {
        data() {
            return {
                indeterminate: true,
                checkAll: false,
                checkGruop: [],
                list: [{
                    name: 'aa',
                    code: 1
                }, {
                    name: 'bb',
                    code: 2
                }， {
                    name: 'cc',
                    code: 3
                }];
            }
        },
        methods: {
            //全选按钮
            handleCheckAll() {
                if(this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;
                if(this.checkAll) {
                    this.list.forEach(st => {
                        checkGroup.push(st.code);
                    });
                } else {
                    this.checkGroup = [];
                }
            },
            //选择按钮
            checkGroupChange(data) {
                this.checkGroup = data;
                if(data.length === this.list.length) {
                    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>    

 

转载于:https://www.cnblogs.com/minozMin/p/9791409.html