微信小程序实现分组全选功能
<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 阅读(1037) 评论(0) 收藏 举报
浙公网安备 33010602011771号