购物车全选和反选

1.点击全选按钮，修改每个店铺选中状态，修改每个店铺下面每个商品选中状态。

2.点击店铺按钮，修改当前店铺下面每个商品的选中状态，如果所有店铺都选中，修改全选按钮选中状态

3.点击商品按钮，如果当前店铺下面所有商品都选中，修改店铺的选中状态，如果所有店铺都选中，修改全选按钮选中状态

<template><div class="box"><div class="header"><inputtype="checkbox"id="selectAllShop":checked="all"@change="checkAll"/><label for="selectAllShop">全选</label></div><div v-for="s in shops" :key="s.shopId"><div class="shop-name"><inputtype="checkbox":checked="s.selected"@change="checkShop($event, s)"/><span>店铺：{{ s.shopName }}</span></div><div class="product-list"><!-- 商品 --><div class="product" v-for="p in s.products" :key="p.id"><div><inputtype="checkbox":checked="p.selected"@change="check($event, p, s)"/><span>商品：{{ s.shopName }}</span></div></div></div></div><div class="foot">已选商品<span>{{ totalCount }}</span> 件 合计金额:<span>{{totalPrice}}</span></div></div></template><script>export default {name: "App",data() {return {all: false,shops: [],};},created() {this.getShopcar();},methods: {getShopcar() {this.$axios.get("/data/shopcart.json").then((res) => {this.shops = res.data.cart;});},checkShop(e, s) {s.selected = e.target.checked; //修改当前店铺的选中状态s.products.forEach((item) => {item.selected = e.target.checked; //修改当前店铺下每个商品的选中状态});var count = this.shops.filter((item) => item.selected).length;this.all = count == this.shops.length; //判断所有店铺，是否都选中，如果都选中，那么修改全选按钮选中},check(e, p, s) {p.selected = e.target.checked; //修改当前商品的选中状态var selectProductCount = s.products.filter((item) => item.selected).length;s.selected = selectProductCount == s.products.length; //判断当前店铺，是否都选中，如果都选中，那么修改店铺按钮选中var count = this.shops.filter((item) => item.selected).length;this.all = count == this.shops.length; //判断所有店铺，是否都选中，如果都选中，那么修改全选按钮选中},checkAll(e) {this.all = e.target.checked; //修改全选按钮的选中状态this.shops.forEach((item) => {item.selected = e.target.checked; //修改店铺的选中状态item.products.forEach((it) => {it.selected = e.target.checked; //修改商品的选中状态});});},},computed: {totalCount() {var res = 0;this.shops.forEach((item) => {item.products.forEach((it) => {if (it.selected) {res += it.count;}});});return res;},totalPrice() {var res = 0;this.shops.forEach((item) => {item.products.forEach((it) => {if (it.selected) {res += it.count * it.price;}});});return res;},},};</script>