Vue如何實現淘寶購物車三級選中功能

本文小編為大家詳細介紹“Vue如何實現淘寶購物車三級選中功能”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue如何實現淘寶購物車三級選中功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

實現：

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

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

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

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

首先說明一下，我使用了vuex來管理購物車數據，所有改變按鈕狀態的方法都寫在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"
    @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, { index, key }) {
  const cartList = state.cartList;

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

  cartList[index].products[key].proChecked = false;
  cartList[index].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.shopCheckedNum -= 1;
},
// 全選
allCheckedTrue(state) {
  state.allChecked = true;
},
// 取消全選
allCheckedFalse(state) {
  state.allChecked = false;
},

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

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

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

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

  // 判斷店鋪是否全選，改變全選按鈕狀態
  if (state.shopCheckedNum === cartList.length) {
    commit("allCheckedTrue");
  } else {
    commit("allCheckedFalse");
  }
},
// 店鋪選中狀態
ShopChecked({ state, commit }, 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", { index, key: k });
      }
    }
  } else {
    // 店鋪取消選中 → 將當前店鋪內所有商品改為未選中
    commit("shopCheckedFalse", index);
    for (let k in cartList[index].products) {
      commit("proCheckedFalse", { index, 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", { index: i, key: k });
      }
    }
  }
},

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

// 單個商品選中
  ProChecked(state, { index, 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如何實現淘寶購物車三級選中功能”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。