uniapp使用uview-ui的checkbox复选框,全选与全不选功能


代码:





关键代码js参数:

data() {
            return {
                // value: '',
                keyword: '',
                checkboxValue1: [],
                checkboxValue2: [],
                // 基本案列数据
                checkboxList1: [
                {
                    id:1,
                    name: '设备故障',
                    disabled: false,
                    checked: false
                },
                {
                    id:2,
                    name: '设备故障2',
                    disabled: false,
                    checked: false
                }
                ],
                allCheck: {
                    name: '全选',
                    values: 'all',
                    checked: true
                },
                checkLength: 0, //用来计录全选、全不选的checked统计
            }
        },

关键代码js方法:

methods: {
            checkboxChange(n) { //=============单个选中
                console.log('change', n);
                this.checkLength = n.length;
                
            },
            changeAll(e, data) {  //========全选方法
                // console.log('点击全选');

                if(this.checkLength == this.checkboxList1.length){ //当前选中的个数等于列表的数,说明当前已经全部选中了
                    this.checkboxList1.forEach(function(item, index){
                        item.checked = false; //设置全不选
                    })
                    this.checkLength = 0;
                }else{ //返之说明当前并没有全部选中
                    
                    this.checkboxList1.forEach(function(item, index){
                        item.checked = true; //设置全选中
                    })
                    this.checkLength = this.checkboxList1.length;
                }
                
            },
        }

相关