在vue中如何實現購物車checkbox的三級聯動

時間 2019-12-11

原文原文鏈接

最近用vue寫一個電商項目，天然就少不了要寫一個購物車的相關頁面，功能完整的購物車的checkbox應該是三級聯動的，1級checkbox是選中購物車中全部的商品，2級checkbox是選中某個店鋪下的全部商品，3級checkbox是選中單個商品，以下圖：vue

那麼，如何在vue中如何實現三級聯動呢？git

主要思路分爲如下3步：github

1.首先在購物車中的每條商品信息裏（在data中定義shops>>products>>isSelected），包含一個isSelected的布爾值屬性，表示單個商品是否已被選中，而且在checkbox中用v-model進行雙向綁定；數組

 1 shops: [
 2     {
 3         index: 1,
 4         brand: '鮮綠水果',
 5         title: '旗艦店',
 6         // 購物車中每一個店鋪的商品列表
 7         products: [
 8             {
 9                 id: 2,
10                 num: 1,
11                 isSelected: true,
12             },
13             {
14                 id: 5,
15                 num: 2,
16                 isSelected: true,
17             },
18         ],
19     },
20     {
21         index: 2,
22         brand: '鮮活之道',
23         title: '自營店',
24         products: [
25             {
26                 id: 12,
27                 num: 1,
28                 isSelected: false,
29             },
30             {
31                 id: 15,
32                 num: 2,
33                 isSelected: false,
34             },
35         ],
36     },
37 ]

2.在computed中定義isSelectedAll布爾值屬性，表示商品是否被全選，另外還有一個數組isShopSelectedAll，數組中包含的布爾值表示每一個店鋪中的商品是否被全選，這兩個屬性都是根據每一個商品中的isSelected的值計算出來的，且這兩個值也要在各自的checkbox中進行綁定；(有一點須要注意的是，因爲v-model進行綁定須要改變computed的值，默認狀況下computed只有getter沒有setter，因此須要在isSelectedAll中加一個空的setter，表示這個計算屬性能夠設置)this

 1  // 購物車中的商品是否全選
 2 isSelectedAll: {
 3     get () {
 4         for (var i = 0; i < this.shops.length; i++) {
 5             if (!this.isShopSelectedAll[i]) {
 6                 return false;
 7             }
 8             }
 9             return true;
10     },
11     // 這裏要加一個空的setter，由於用v-model綁定時會報錯
12     set () {},
13 },
14 // 店鋪中的商品是否全選
15 isShopSelectedAll: function () {
16     var tempArr = [];
17     for (var i = 0; i < this.shops.length; i++) {
18         tempArr[i] = true;
19         var products = this.shops[i].products;
20         for (var j = 0; j < products.length; j++) {
21             if (!products[j].isSelected) {
22                 tempArr[i] = false;
23                 break;
24             }
25         }
26     }
27     return tempArr;
28 },

3.而後，定義一個方法selectAll(all)，在點擊1級checkbox或2級checkbox時，改變對應每條商品中的isSelected的布爾值，而後在computed中的isSelectedAll、isShopSelectedAl會自動響應；spa

 1 // 全選購物車或者單個店家
 2 selectAll: function (all) {
 3     // 參數all可傳入shops數組或者shops數組內的一個對象
 4     // all傳入shops數組表示購物車中商品全選
 5     // all傳入一個對象表示某個店鋪中商品全選
 6     if (all instanceof Array) {
 7         var bool = !this.isSelectedAll;
 8         // var bool = false;
 9         for (var i = 0; i < all.length; i++) {
10             var products = all[i].products;
11             for (var j = 0; j < products.length; j++) {
12                 products[j].isSelected = bool;
13             }
14         }
15     } else {
16         var index = this.shops.indexOf(all);
17         var bool = !this.isShopSelectedAll[index];
18         for (var i = 0; i < all.products.length; i++) {
19             all.products[i].isSelected = bool;
20         }
21     }
22 },