在vue中如何实现购物车checkbox的三级联动

时间：2024-03-14 14:51:23

最近用vue写一个电商项目，自然就少不了要写一个购物车的相关页面，功能完整的购物车的checkbox应该是三级联动的，1级checkbox是选中购物车中所有的商品，2级checkbox是选中某个店铺下的所有商品，3级checkbox是选中单个商品，如下图：

在vue中如何实现购物车checkbox的三级联动

那么，如何在vue中如何实现三级联动呢？

主要思路分为以下3步：

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，表示这个计算属性可以设置)

 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会自动响应；

 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 },

 

这样，就可以实现购物车中checkbox的三级联动了。

 

体验地址：https://yuan-yiming.github.io/fresh-everyday/dist/#/user-center/shopping-cart

源码地址：https://github.com/Yuan-Yiming/fresh-everyday/blob/master/src/components/ShoppingCart.vue

 

相关文章