1、查看代码发现选中全选是由 check 样式控制的，所以我们要添加一个变量来控制是否全选：
<span :class="[‘checkbox-btn‘, ‘item-check-btn‘, allCheck ? ‘check‘ : ‘‘]"> <script> export default { data() { return { allCheck: false, // 是否全选 } }, } </script>
2、给全选添加点击事件：
<a href="javascipt:;" @click="getAllChecked"> <span :class="[‘checkbox-btn‘, ‘item-check-btn‘, allCheck ? ‘check‘ : ‘‘]"> <script> export default { methods: { // 点击全选和反选 getAllChecked() { let flag = !this.allCheck } } } </script>
我们发现每个商品都选中了才会变为全选，反之有一个商品没有选中，则不是全选状态。
3、这里我们可以用计算属性来定义 allCheck ：
// 计算属性 computed: { allCheck() { // every 当数组中每一项都返回 true，整体才返回 true；有一项返回 false，整体就返回 false return this.cartList.every(item => { return item.checked }) } }
注意：上面 data 里的 allCheck 变量记得注释掉，改用计算属性。
4、继续 getAllChecked() 方法：
// 点击全选和反选 getAllChecked() { let flag = !this.allCheck this.cartList.forEach(item => { item.checked = flag }) },
这时点击全选就可以全部选中商品，反之则全部没选中。
5、同时选中商品时计算总价
同样定义计算属性，计算选中商品的价格总计：
<div class="item-total"> 总价: <span class="total-price">{{ totalPrice | curreney }}</span> </div> <script> export default { // 计算属性 computed: { // 总价 totalPrice() { let money = 0 this.cartList.forEach(item => { if (item.checked) { money += item.productNum * item.productPrice } }) return money } } } </script>
此时选中商品或改变商品数量，对应的总价随之改变。
原文：https://www.cnblogs.com/joe235/p/12704164.html