最近在练习商城项目，记录一下实现购物车三级选择的过程（小白一个，层次感很好）效果图：实现：1.全选时，所有商品+商店被选中；否则全部取消选中2.店铺选中3.选中店铺内所有商品→选中对应店铺；否则取消选择店铺4.选择所有店铺+所有产品→选择所有按钮；否则取消选择首先说明一下，我用Vuex来管理购物车数据，所有改变按钮状态的方法都写在mutationconststate={car??tList:[],//shoppingcartlisttotalCount:0,allChecked:false,//全选shopCheckedNum:0,//已选店铺数/***cartList:[*{*shopName,*shopChecked:false,//已选店铺*proCheckedNum:0,//已选店铺数当前店铺的items*cartGoodsInfo:[*{iid,styleName,proChecked...}//里面是商品的各种信息，proChecked是商品的选中状态*{...}*]*},*{...}*]*/}；html选择按钮部分//这个是Choose按钮，我把它封装成一个组件chooseClass接收父组件传过来的值，当它被选中时改变样式//商品选择按钮商品，store，点击全选按钮的方法//index:Storeindexvaluekey：当前商品在当前店铺的索引值proCheckedClick(index,key){this.$store.dispatch("ProChecked",{index,key});},shopCheckedClick(index){this.$store.dispatch("ShopChecked",index);},allChecked(){this.$store.dispatch("AllChecked");},mutations//选中的单个项目proCheckedTrue(state,{index,key}){constcartList=state.cartList;cartList[index].products[key].proChecked=true;cartList[index].proCheckedNum+=1;//商品数量+1},//单个商品未勾选proCheckedFalse(state,{index,key}){constcartList=state.cartList;cartList[index].products[key].proChecked=false;cartList[index].proCheckedNum-=1;},//shopCheckedTrue(state,index){constcartList=state.cartList;cartList[index].shopChecked=true;console.log(state.shopCheckedNum);英石ate.shopCheckedNum+=1;//商店数量+1},//ShopCheckedFalse(state,index){constcartList=state.cartList;cartList[index].shopChecked=false;state.shopCheckedNum-=1;},//全选allCheckedTrue(state){state.allChecked=true;},//取消全选allCheckedFalse(state){state.allChecked=false;},因为方法涉及到一些逻辑判断，我把逻辑判断的一部分它被放置在操作中//商品状态ProChecked({state,commit},{index,key}){constcartList=state.cartList;//这里需要反过来，因为此时的proChecked是在点击按钮之前!cartList[index].products[key].proChecked?提交（“proCheckedTrue”，{索引，键}）：提交（“proCheckedFalse”，{索引，键}）;//选择所有产品，选择选择的商店if(cartList[index].proCheckedNum===cartList[index].products.length){commit("shopCheckedTrue",index);}//所有商品都没有被选中→如果店铺被选中，则改为未选中//（不加这个条件判断的话，没有被选中的店铺也会执行shopCheckedFalse，导致被选中的商品数量为-1)elseif(cartList[index].shopChecked){commit("shopCheckedFalse",index);}//判断是否所有店铺都被选中，改变选中按钮的状态if(state.shopCheckedNum===cartList.length){commit("allCheckedTrue");}else{commit("allCheckedFalse");}},//店铺检查状态ShopChecked({state,commit},index){constcartList=state.购物车清单；if(!cartList[index].shopChecked){//让店铺被选中→将当前店铺中未选中的商品改为选中commit("shopCheckedTrue",index);for(letkincartList[index].products){if(!cartList[index].products[k].proChecked){commit("proCheckedTrue",{index,key:k});}}}else{//Storeunchecked→当前店铺所有商品改为uncheckedcommit("shopCheckedFalse",index);for(letkincartList[index].products){commit("proCheckedFalse",{index,key:k});}}if(state.shopCheckedNum===cartList.length){commit("allCheckedTrue");}else{commit("allCheckedFalse");}},//选择所有AllChecked({state,commit}){constcartList=state.cartList;if(!state.allChecked){//全选→所有未勾选的店铺+商户选择所有产品commit("allCheckedTrue");for(letiincartList){if(!cartList[i].shopChecked){commit("shopCheckedTrue",i);}for(letkincartList[i].products){if(!cartList[i].products[k].proChecked){commit("proCheckedTrue",{index:i,key:k});}}}}else{//取消选择所有→所有商店+Commit("allCheckedFalse");for(letiincartList){commit("shopCheckedFalse",i);for(letkincartList[i].products){commit("proCheckedFalse",{index:i,key:k});}}}},
