el-checkbox-group全选、单选实现

逃离我推掉我的手 2022-09-05 01:46 228阅读 0赞

页面结构：

<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    					<el-checkbox v-for="(city,i) in cities" :label="city.path" :key="i">{
       {city.time}}</el-checkbox>
    </el-checkbox-group>
    <el-checkbox size="small" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

js方法：

checkAll: true,
    cities: [], //数据源
    checkedCities:[], //绑定默认选中
    isIndeterminate:false, //设置 indeterminate 状态，只负责样式控制
    
    handleCheckedCitiesChange(value) {//单选
    				let _self=this; 				
    				var modelBounds = new qq.maps.LatLngBounds(
    					new qq.maps.LatLng(_self.park.latMax,_self.park.lngMin),
    					new qq.maps.LatLng(_self.park.latMin,_self.park.lngMax)
    				);  	
    				nperArray=common.bSort(value);//冒泡排序	
    				for(let i=0;i< nperArray.length;i++){                                   
    					this.mtOlayArray[i] = new qq.maps.GroundOverlay({
    						map:_self.map,
    						imageUrl:_self.global.apiUrl + nperArray[i]+'?t=' + Math.random(),            
    						bounds: modelBounds,
    						visible:true,
    						opacity: 0.4,
    						zIndex: 3
    					});                     
    				}
    			},
    			handleCheckAllChange(val) { //全选
    			            let _self=this;  
    			            this.checkedCities=[];						
    			            this.cities.forEach(item=>{  
    			                this.checkedCities.push(item.path)
    			            })  
    			            if(val){       
    			                var modelBounds = new qq.maps.LatLngBounds(
    			                    new qq.maps.LatLng(_self.parkCenter.lngMin,_self.parkCenter.latMax),
    			                    new qq.maps.LatLng(_self.parkCenter.lngMax,_self.parkCenter.latMin)
    			                );
    			               
    			                for(let i=0;i< this.checkedCities.length;i++){                                   
    			                    this.mtOlayArray[i] = new qq.maps.GroundOverlay({
    			                        map:_self.map,
    			                        imageUrl:_self.global.apiUrl + this.checkedCities[i]+'?t=' + Math.random(),            
    			                        bounds: modelBounds,
    			                        visible:true,
    			                        opacity: 0.4,
    			                        zIndex: 3
    			                    });                     
    			                }  
    			            }
    			            this.checkedCities = val ? this.checkedCities : []; 
    			            this.isIndeterminate = false;  
    			      },