最近花了一点时间做了一个购物车案列，功能虽然没多少，但是知识量和代码量却是满满的，直接上图：
效果图
三个部分
- 顶部标题
- 商品列表
- 底部合计
顶部标题
顶部的标题没什么好说的，左边的是全选框，右边的的是商品的 价格、数量、小计和编辑介绍。
全选框点击后会把商品列表全部选上，底部的全选框也会勾选，如果取消其中一个商品的选择，那全选框就会取消勾选，右边的编辑则是点击后会编成完成，商品列表中的“--”会变成”X“，点击后会删除这个商品。
全选
取消勾选
//全选
allCheck() {
this.all = !this.all
this.Commodity.forEach(p => {
p.decide = this.all
})
},
//勾选商品
decideCheck(i) {
if (i !== '') {
this.Commodity[i].decide = !this.Commodity[i].decide
}
//检测商品是否全部选中
for (let index = 0; index < this.Commodity.length; index++) {
if (this.Commodity[index].decide === false) {
this.all = false
return
}
}
this.all = true
},
还有之前发现的一点就是，在全选之后，又点掉其中一个，全选框取消勾选，然后你再点击编辑，删除你取消勾选的那一个，这样子可以说是全部商品都勾选了，但是全选框却不会选中，所以后来我在点击删除的时候会再一次遍历商品是否全选中，是的话，全选框勾选。
//删除其中的某一个商品
deleteLi(i) {
this.Commodity.splice(i, 1)
this.decideCheck('')
},
后面说完会把全部代码贴出来。
