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>    
  • 相关阅读:
    如何在magento添加推荐分类
    Apache和iis的冲突处理
    怎么在windows7下搭建服务器
    centos dns配置
    wget net-tools
    centos7 ip地址设置
    centos 7 u盘安装
    centos7 u盘启动路径设置
    screen 命令
    lnmp重置mysql密码
  • 原文地址:https://www.cnblogs.com/minozMin/p/9791409.html
Copyright © 2011-2022 走看看