微信小程序实现分组全选功能
<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' : ''"></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) 编辑 收藏 举报