Uniapp uses the checkbox check box of uview UI to select all or none

Time:2022-5-23

code:

Historical alarm
                
            
        
        
        
            
            
            
                
                    
                    
                
            

            
                
                    equipment failure 
                
                
                    #Line 1 mixer
                
             
            
                handle
            
            
        
        
        
        
            
                
                    
                    
                
               
            
            
                Select all
            
            
                common
                3
                term
            
            
                handle
            
        

    



    export default {
        data() {
            return {
                // value: '',
                keyword: '',
                checkboxValue1: [],
                checkboxValue2: [],
                //Basic case data
                checkboxList1: [
                {
                    id:1,
                    name: 'equipment failure ',
                    disabled: false,
                    checked: false
                },
                {
                    id:2,
                    name: 'equipment failure 2',
                    disabled: false,
                    checked: false
                }
                ],
                allCheck: {
                    name: 'Select all',
                    values: 'all',
                    checked: true
                },
                checkLength: 0, //用来计录Select all、全不选的checked统计
            }
        },
        onShow() {
            
        },
        methods: {
            Checkboxchange (n) {// ==================== single check
                console.log('change', n);
                this.checkLength = n.length;
                
            },
            changeAll(e, data) {  //========Select all方法
                // console.log('点击Select all');

                If (this. Checklength = = this. Checkboxlist1. Length) {// the number of items currently selected equals the number of items in the list, indicating that all items are currently selected
                    this.checkboxList1.forEach(function(item, index){
                        item. checked = false; // Set none
                    })
                    this.checkLength = 0;
                }Else {// returning indicates that not all items are currently selected
                    
                    this.checkboxList1.forEach(function(item, index){
                        item.checked = true; //设置Select all中
                    })
                    this.checkLength = this.checkboxList1.length;
                }
                
            },
        }
    }



    page {
        background-color: #F9F9FC;
    }

    /*Customize navigation bar*/
    .batchManagement_text {
        font-size: 32rpx;
        ;
        color: #666666;
    }

    .batchManagement {
        width: 750rpx;
        background-color: #F9F9FC;
    }

 

 

Key code JS parameters:

data() {
            return {
                // value: '',
                keyword: '',
                checkboxValue1: [],
                checkboxValue2: [],
                //Basic case data
                checkboxList1: [
                {
                    id:1,
                    Name: 'equipment failure',
                    disabled: false,
                    checked: false
                },
                {
                    id:2,
                    Name: 'equipment fault 2',
                    disabled: false,
                    checked: false
                }
                ],
                allCheck: {
                    Name: 'select all',
                    values: 'all',
                    checked: true
                },
                Checklength: 0, // used to record checked statistics with or without all selected
            }
        },

 

 

Key code JS method:

methods: {
            Checkboxchange (n) {// ==================== single check
                console.log('change', n);
                this.checkLength = n.length;
                
            },
            Changeall (E, data) {// ========== select all method
                // console. Log ('click select all ');

                If (this. Checklength = = this. Checkboxlist1. Length) {// the number of items currently selected equals the number of items in the list, indicating that all items are currently selected
                    this.checkboxList1.forEach(function(item, index){
                        item. checked = false; // Set none
                    })
                    this.checkLength = 0;
                }Else {// returning indicates that not all items are currently selected
                    
                    this.checkboxList1.forEach(function(item, index){
                        item. checked = true; // Set all selected
                    })
                    this.checkLength = this.checkboxList1.length;
                }
                
            },
        }

 

 

 

 

 

 

 

 

 

 

 

Recommended Today

Simple concept and use of elasticsearch

Elastic search, abbreviated as es, is a distributed engine that can realize rapid search of massive data. Basic concepts The structure of ES storage can be divided into index, type, document and field Index is an index library, which is used to store a kind of data or a kind of business.Type has been canceled […]