vue多选框

一、达到的目的

二、所做的工作
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、测试一下是否成功
成功，整个流程没有任何问题。