在使用uniapp开发的时候，我们通常会实现批量操作。那么，我们怎么利用基础的组件构建一个可以实现全选和单选的组件呢？下面我就来介绍一下我的思路：

样式代码：

<label>
	<checkbox :checked="checkAll" @click="all_change"/>
	<span>全选</span>
</label>
<checkbox-group @change="change">
	<label v-for="(item,index) in list" :key="item.id">
		<view>
			<checkbox :value="item.id":checked="Selected(item.id)"/>
		</view>
		<view>
		</view>
	</label>
</checkbox-group>

变量使用：

list: [],
delist: [],
checkAll: false,

js代码：

change(e) {
	this.delist = e.detail.value;
	this.updateAllSelected();
},
all_change() {
	this.checkAll = !this.checkAll;
	if (this.checkAll) {
		this.delist = this.list.map(item => item.id.toString());
	} else {
	    this.delist = [];
	}
},
iselected(id) {
	return this.delist.includes(id.toString());
},
updateAllSelected() {
 	this.checkAll = this.delist.length === this.list.length;
},

非全选思路：

利用check-group，label，check-box，其中check-box的value绑定每一个数组元素id

只要选择框改变，就会触发change函数，函数接受一个e变量，变量的e.detail.value就是被选中数组元素的id，用一个数组delist存储

每一个check-box的check属性动态绑定函数iselected()，函数检测delist数组是否包含当前传过来的id，如果有代表选中了，就返回true，如果没有代表没有选中，就返回false，

每次调用iselected函数之后要调用一次updateAllSelected函数检查是否为全选状态，全选状态的条件是delist数组长度与list数组长度相等，就代表全部选中，则将全选框置为true。

全选思路

代码中的第一个checkbox的check动态绑定checkAll状态，点击选项框时，立刻将checkAll置为相反状态，然后进行判断，如果置反后的状态为true，代表当前要全选列表，则将list每一个元素的id保存在delist中，如果为false，将delist数组置空即可

这里强调一点就是，如果list数组的id是number类型，需要将其转换为string类型才保存在delist中，因为在check-group中的选中数组元素是string类型，如果直接将number类型的id存入delist中，就会导致出现问题

以上就是运用基础组件实现全选和单选的思路，如有其它想法欢迎在评论区留言