vue多选框
一、达到的目的二、所做的工作1、画出单选框组每个单选框是u-checkbox,这一组外边用u-checkbox-group包裹起来<u-checkbox-group @change="checkboxGroupChange" :size="size" :width="width":wrap="wrap" :max="max":activeColor="activeColor"><
·
一、达到的目的
二、所做的工作
1、画出单选框组
每个单选框是u-checkbox,这一组外边用u-checkbox-group包裹起来
<u-checkbox-group @change="checkboxGroupChange" :size="size" :width="width"
:wrap="wrap" :max="max"
:activeColor="activeColor"
>
<u-checkbox @change="checkboxChange"
v-model="item.checked" v-for="(item, index) in bigList"
:key="index" :name="index"
:shape="shape"
:disabled="item.disabled"
>
<view class="oneItem" @click="toInformation(index)">
</view>
</u-checkbox>
</u-checkbox-group>
2、全选框
全选框就是一个单选框
<u-checkbox @change="testT" v-model="allCheck.checked" >{{allCheck.name}}</u-checkbox>
3、数据结构
下面这是全选框的数据结构
allCheck : {
name : '全选',
value : 'all',
checked : false
},
单选框的数据结构就不用说了,只是在bigList原始数据的item里加个checked
4、连锁反应
第一个连锁反应:点击完所有单选框,全选框应该是选中状态;没点完所有单选框,全选框为未选中状态。
解释一下下边函数的逻辑吧,这个函数单选框组的函数,如果点击长度和bigList单选个数一样长,就设置allCheck的checked属性为true。否则的话设置为false
checkboxGroupChange(e){
this.choseDiKuai=e;
console.log(this.choseDiKuai)
if(e.length===this.bigList.length){
this.$set(this.allCheck,'checked',true);
}else{
this.$set(this.allCheck,'checked',false);
}
},
第二个连锁反应:点了全选框,所有单选框都是选择状态,没点单选框,全选框为未选中状态。
这个函数是全选框的函数,逻辑是这样的,如果取消全选框,就把每个单选框给设置为checked设置为false,并且全选框的checked为false,反之都设为true;
testT(e){
if(!e.value){
this.bigList.map(item => this.$set(item, 'checked', false));
this.$set(this.allCheck, 'checked', false);
this.choseDiKuai=[];
}else{
this.bigList.map(item => this.$set(item, 'checked', true));
this.$set(this.allCheck, 'checked', true);
this.choseDiKuai=[];
for(var i=0;i<this.bigList.length;i++){
this.choseDiKuai[i]=i;
}
}
},
5、测试一下是否成功
成功,整个流程没有任何问题。
更多推荐
已为社区贡献3条内容
所有评论(0)