最近在練習商城專案，記錄下實現購物車三級選中的過程（小白一個，水平很菜）

效果圖：

實現：

1.全選時所有商品+店鋪全部選中；反之全部取消選中

2.店鋪選中時，當前店鋪內所有商品選中；反之取消選中

3.店鋪內商品全選 → 所屬店鋪選中；反之取消選中店鋪

4.店鋪+所有商品全選 → 全選按鈕選中；反之取消選中

首先說明一下，我使用了x來管理購物車資料，所有改變按鈕狀態的方法都寫在mutaition裡

const state = {
  cartList: [],// 購物車列表
  totalCount: 0,allChecked: false,// 全選
  shopCheckedNum: 0,// 選中的店鋪數量
  /**
   * cartList: [
   *  {
   *    shopName,*    shopChecked: false,// 店鋪選中
   *    proCheckedNum: 0,// 當前店鋪商品選中數量
   *    cartGoodsInfo: [
   *      {iid,styleName,proChecked...}  // 裡邊是商品的各種資訊，proChecked是商品選中狀態
   *      {...}
   *    ]
   *  },*  {...}
   * ]
   */
};

html選擇按鈕部分

// 這是選擇按鈕，我把它封裝成了一個元件  chooseClass接收父元件傳值改變選中時的樣式
// 商品的選中按鈕
<cart-choose
    :chooseClass="$store.state.cartList[index].products[key].proChecked"
    @click.native.stop="proCheckedClick(index,key)"
/>
// 店鋪的選擇按鈕  （我把店鋪列表和商品分成了兩個元件，index是傳給店鋪列表內商品的）
<cart-choose
    :index="index"
    :chooseClass="$store.state.cartList[index].shopChecked"www.cppcns.com
 

    @click.native="shopCheckedClick(index)"
/>
// 全選按鈕
<cart-choose :chooseClass="$store.state.allChecked" />

商品，店鋪，全選按鈕的點選方法

// index：店鋪索引值  key：當前商品在當前店鋪內的索引值
proCheckedClick(index,key) {
    this.$store.dispatch("ProChecked",{ index,key });
},shopCheckedClick(index) {
    this.$store.dispatch("ShopChecked",index);
},allChecked() {
    this.$store.dispatch("AllChecked");
},

mutations

// 單個商品選中
proCheckedTrue(state,key }) {
  const cartList = state.cartList;

  cartList[index].products[key].proChecked = true;
  cartList[index].proCheckedNum += 1;  // 商品數量+1
},// 單個商品取消選中
proCheckedFalse(state,key }) {
  const cartList = state.cartList;

  cartList[index].products[key].proChecked = false;
  cartList[index]SlYwn.proCheckedNum -= 1;
},// 店鋪選中
shopCheckedTrue(state,index) {
  const cartList = state.cartList;

  cartList[index].shopChecked = true;
  console.log(state.shopCheckedNum);
  state.shopCheckedNum += 1;  // 店鋪數量+1
},// 店鋪取消選中
shopCheckedFalse(state,index) {
  const cartList = state.cartList;

  cartList[index].shopChecked = false;
  state.shopwww.cppcns.comCheckedNum -= 1;
},// 全選
allCheckedTrue(state) {
  state.allChecked = true;
},// 取消全選
allCheckedFalse(state) {
  state.allChecked = false;
},

因為方法涉及到一些邏輯判斷，我把邏輯判斷的部分都放在了actions裡

// 商品狀態
ProChecked({ state,commit },key }) {
  const cartList = state.cartList;

  // 這裡要取反，因為此時的proChecked是點選按鈕前的
  !cartList[index].products[key].proChecked
    ? commit("proCheckedTrue",key })
    : commit("proCheckedFalse",key });

  // 商品全選，所選店鋪選中
  if (cartList[index].proCheckedNum === cartList[index].products.length) {
    commit("shopCheckedTrue",index);
  }
  // 商品沒全選 → 如果店鋪選中改為未選中
  // (不加這個判斷條件的話 本來沒選中的店鋪也會執行shopCheckedhttp://www.cppcns.comFalse,導致商品選中數量會-1)
  else if (cartList[index].shopChecked) {
    commit("shopCheckedFalse",index);
  }

  // 判斷店鋪是否全選，改變全選按鈕狀態
  if (state.shopCheckedNum === cartList.length) {
    commit("allCheckedTrue");
  } else {
    commit("allCheckedFalse");
  }
},// 店鋪選中狀態
ShopChecked({ state,index) {
  const cartList = state.cartList;

  if (!cartList[index].shopChecked) {
    // 讓店鋪選中 → 將當前店鋪內未選中的商品改為選中
    commit("shopCheckedTrue",index);
    for (let k in cartList[index].products) {
      if (!cartList[index].products[k].proChecked) {
        commit("proCheckedTrue",key: k });
      }
    }
  } else {
    // 店鋪取消選中 → 將當前店鋪內所有商品改為未選中
    commit("shopCheckedFalse",index);
    for (let k in cartList[index].products) {
      commit("proCheckedFalse",key: k });
    }
  }

  if (state.shopCheckedNum === cartList.length) {
    commit("allCheckedTrue");
  } else {
    commit("allCheckedFalse");
  }
},// 全選
AllChecked({ state,commit }) {
  const cartList = state.cartList;

  if (!state.allChecked) {
    // 全選 → 所有未選中的店鋪+商品全部選中
    commit("allCheckedTrue");
    for (let i in cartList) {
      if (!cartList[i].shopChecked) {
        commit("shopCheckedTrue",i);
      }
      for (let k in cartList[i].products) {
        if (!cartList[i].products[k].proChecked) {
          commit("proCheckedTrue",{ index: i,key: k });
        }
      }
    }
  } else {
    // 取消全選 → 所有店鋪+商品取消選中
    commit("allCheckedFalse");
    for (let i in cartList) {
      commit("shopCheckedFalse",i);
      for (let k in cartList[i].products) {
        commit("proCheckedFalse",key: k });
      }
    }
  }
},

最開始我是把這些程式碼都放在了三個方法裡，這樣寫也能實現，但是看起來實在太亂了，而且不能追蹤到具體是進行了什麼操作。不想搞那麼多方法的可以看看

// 單個商品選中
  ProChecked(state,key }) {
    const cartList = state.cartList;

    // 商品選中狀態取反
    cartList[index].products[key].proChecked =
      !cartList[index].products[key].proChecked;

    // 如果選中，選中數量+1，取消選中則-1
    if (cartList[index].products[key].proChecked) {
      cartList[index].proCheckedNum++;
    } else {
      cartList[index].proCheckedNum--;
    }

    // 如果商品全選，則店鋪選中；否則店鋪取消選中
    if (cartList[index].proCheckedNum === cartList[index].products.length) {
      cartList[index].shopChecked = true;
      state.shopCheckedNum++;
    } else if (cartList[index].shopChecked) {
      cartList[index].shopChecked = false;
      state.shopCheckedNum--;
    }
    // 判斷店鋪是否全選，改變全選按鈕狀態
    if (state.shopCheckedNum === cartList.length) {
      state.allChecked = true;

到此這篇關於Vue實現淘寶購物車三級選中功能詳解的文章就介紹到這了,更多相關Vue購物車三級選中功能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！