最近用vue写一个电商项目，自然就少不了要写一个购物车的相关页面，功能完整的购物车的checkbox应该是三级联动的，1级checkbox是选中购物车中所有的商品，2级checkbox是选中某个店铺下的所有商品，3级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的三级联动了。

 

体验地址：

源码地址：