问题出现场景：

电商小程序的购物车页面，当选中某一个店铺时，该店铺中所有的商品都要选中，取消店铺的选中时，店铺中的所有商品都要取消选中。

html结构

checkbox是多选框，具体样式是方形的，为了能够实现圆形，可以在checkbox组件外面的标签中添加checkbox-round的class样式。

<checkbox :checked="shop.checked" style="transform:scale(0.7)" @click="selectShop($event,shop)"/>

解释一下：

1. checked 根据shop.checked参数来展示选中或者未选中
2. style是行间样式，圆圈缩小为原来的0.7
3. click监听复选框的点击事件，默认的第一个参数都是e，就是点击事件本身，第二个参数可以传递数据

selectShop(e,obj){
	// e代指点击事件本身，obj就是传递的参数。
	const checked = !obj.checked;
	for (let i in obj.list) {
		obj.list[i].forEach(item => {
			if (item.specSelected[0].stock) {
				item.checked = checked;
			} else {
				item.checked = false;
			}
		})
	}
	//  此处通过this.$delete先删除对象中的某个参数，然后再通过this.$set进行赋值，才能够实现视图渲染
	this.$delete(obj,'checked');
	this.$set(obj,'checked',checked);
	for (let i in this.shopList) {
		this.shopList[i].shoppingCartVoList.every(item2 => {
			if(!item2.checked){
				this.allChecked = false;
				return true;
			}else{
				this.allChecked = true;
			}
		})
	}
	this.calcTotal();
},

知识点如下：

视图渲染问题

在vue的使用过程中，如果需要修改视图中的某个值，一般可以通过直接赋值来实现。
如果针对的是对象中的某个值，可以通过this.$set()的方式来处理。

this.$set()赋值后视图不渲染

this.$set(obj,'checked',true);这段代码的意思就是：将obj对象中的checked参数更改为true.
但是视图并没有发生改变。

this.$delete()解决this.$set()视图不渲染的问题

百度一番后，发现可以通过this.$delete()先将对象中的某个值删除，然后再通过this.$set()的方式来进行赋值，即可达到视图渲染的效果。