zoukankan      html  css  js  c++  java
  • 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>    
  • 相关阅读:
    u Calculate e
    Elevator
    骑士走棋盘
    Number Sequence
    老鼠走迷宫
    Let the Balloon Rise
    A+B Problem II
    Three-Color Flag
    Noldbach problem
    Almost Prime
  • 原文地址:https://www.cnblogs.com/minozMin/p/9791409.html
Copyright © 2011-2022 走看看