• 微信小程序实现分组全选功能


    <view class="search-list">
                    <view class="content">
                        <view class="uni-panel list" v-for="(item, index) in searchList" :key="index">
                            <view class="uni-panel-h"  @click="triggerCollapse(index)">
                                <image :src="item.nameSrc" class="img-size" mode="scaleToFill" />
                                <text class="uni-panel-text list-title">{{item.name}}</text>
                                <text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">&#xe581;</text>
                            </view>
                            <view class="uni-panel-c" v-if="item.open">
                                <view class="card-hid-body">
                                    <view class="card-hid-item" id="checkId" v-if="item.keyword.length>0">
                                        <checkbox-group name="allCheck" @change="changeAll(index)">
                                            <label>
                                                <checkbox :value="item" :checked="item.checked" style="transform: scale(0.8);"/><text>{{allCheck.name}}</text>
                                            </label>
                                        </checkbox-group>
                                    </view>
                                    <view class="card-hid-item" v-for="(item2,key) in item.keyword" :key="key">
                                        <checkbox-group @change="checkboxChange(item2.headlines)">
                                            <label class="" :key="item2.headlines">
                                                <checkbox :value="item2.headlines" :checked="item2.checked" style="transform: scale(0.8);" />
                                                <text class="headlines">{{item2.headlines}}</text>
                                                <text class="time">{{item2.time}}</text>
                                            </label>
                                        </checkbox-group>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
    data() {
    	return {
    	  allCheck :
    		{
    			name : '全选',
    			value : 'all',
    			checked : false
    		},
    		searchList:[],
    		checkedList:[]
    	  }
    },
    
    // 全选
    changeAll : function(index) {
    	for(let i=0;i<this.searchList.length;i++){
    		if(i==index){
    			if(this.searchList[i].checked) {
    				this.searchList[i].keyword.map(item => this.$set(item, 'checked', false));
    				this.$set(this.searchList[i], 'checked', false);
    			}else{
    				this.searchList[i].keyword.map(item => this.$set(item, 'checked', true));
    				this.$set(this.searchList[i], 'checked', true);
    			}
    		}
    	}
    },
    //单选
    checkboxChange: function (e) {
    	for(let i=0;i<this.searchList.length;i++){
    		var items = this.searchList[i].keyword;
    		var values = e;
    		for(var j = 0; j < items.length; j++) {
    			var item = items[j];
    			if(values.includes(item.headlines)){
    				if(item.checked){ //判断是否选中,如果已经选中则取消勾选
    					this.$set(item,'checked',false);
    				}else{
    					this.$set(item,'checked',true);
    				}
    			}
    		}
    		// 判断选中状态
    		var arr = [];
    		this.searchList[i].keyword.forEach(item => item.checked == true ? arr.push(item) : '');
    		if(this.searchList[i].keyword.length!=0){
    			var isAll = arr.length==this.searchList[i].keyword.length?true:false;
    			isAll ? this.$set(this.searchList[i], 'checked', true) : this.$set(this.searchList[i], 'checked', false)
    		}
    
    	}
    },
    

      

      

  • 相关阅读:
    【转载】网站服务器运维记实:阿里云1核2G突发性能t5服务器突然变得卡顿
    【转载】C#中自定义Sort的排序规则IComparable接口
    【转载】C#将图片转换为二进制流调用
    【转载】ASP.NET MVC重写URL制作伪静态网页,URL地址以.html结尾
    Java通过反射机制修改类中的私有属性的值
    Android -- 分享功能和打开指定程序
    Java存储密码用字符数组
    java笔试题(3)
    Java中的String与常量池
    Android -- 距离感应器控制屏幕灭屏白屏
  • 原文地址:https://www.cnblogs.com/double-s/p/15007302.html
Copyright © 2020-2023  润新知