Vue Checkbox全选和选中的方法

最新推荐文章于 2026-01-06 20:16:58 发布

转载最新推荐文章于 2026-01-06 20:16:58 发布 · 563 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/minozMin/p/9791409.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何在Vue.js中使用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>