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

<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)
		}

	}
},

  

  

 

posted on 2021-07-13 17:04  ALWAYS☆REMIND  阅读(965)  评论(0编辑  收藏  举报

导航