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

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

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

主要思路分为以下3步：

1.首先在购物车中的每条商品信息里（在data中定义shops>>products>>isSelected），包含一个isSelected的布尔值属性，表示单个商品是否已被选中，并且在checkbox中用v-model进行双向绑定；

 shops: [
     {
         index: 1,
         brand: '鲜绿水果',
         title: '旗舰店',
         // 购物车中每个店铺的商品列表
         products: [
             {
                 id: 2,
                 num: 1,
                 isSelected: true,
             },
             {
                 id: 5,
                 num: 2,
                 isSelected: true,
             },
         ],
     },
     {
         index: 2,
         brand: '鲜活之道',
         title: '自营店',
         products: [
             {
                 id: 12,
                 num: 1,
                 isSelected: false,
             },
             {
                 id: 15,
                 num: 2,
                 isSelected: false,
             },
         ],
     },
 ]

2.在computed中定义isSelectedAll布尔值属性，表示商品是否被全选，另外还有一个数组isShopSelectedAll，数组中包含的布尔值表示每个店铺中的商品是否被全选，这两个属性都是根据每个商品中的isSelected的值计算出来的，且这两个值也要在各自的checkbox中进行绑定；(有一点需要注意的是，由于v-model进行绑定需要改变computed的值，默认情况下computed只有getter没有setter，所以需要在isSelectedAll中加一个空的setter，表示这个计算属性可以设置)

  // 购物车中的商品是否全选
 isSelectedAll: {
     get () {
         for (var i = 0; i < this.shops.length; i++) {
             if (!this.isShopSelectedAll[i]) {
                 return false;
             }
             }
             return true;
     },
     // 这里要加一个空的setter，因为用v-model绑定时会报错
     set () {},
 },
 // 店铺中的商品是否全选
 isShopSelectedAll: function () {
     var tempArr = [];
     for (var i = 0; i < this.shops.length; i++) {
         tempArr[i] = true;
         var products = this.shops[i].products;
         for (var j = 0; j < products.length; j++) {
             if (!products[j].isSelected) {
                 tempArr[i] = false;
                 break;
             }
         }
     }
     return tempArr;
 },

3.然后，定义一个方法selectAll(all)，在点击1级checkbox或2级checkbox时，改变对应每条商品中的isSelected的布尔值，然后在computed中的isSelectedAll、isShopSelectedAl会自动响应；

 // 全选购物车或者单个店家
 selectAll: function (all) {
     // 参数all可传入shops数组或者shops数组内的一个对象
     // all传入shops数组表示购物车中商品全选
     // all传入一个对象表示某个店铺中商品全选
     if (all instanceof Array) {
         var bool = !this.isSelectedAll;
         // var bool = false;
         for (var i = 0; i < all.length; i++) {
             var products = all[i].products;
             for (var j = 0; j < products.length; j++) {
                 products[j].isSelected = bool;
             }
         }
     } else {
         var index = this.shops.indexOf(all);
         var bool = !this.isShopSelectedAll[index];
         for (var i = 0; i < all.products.length; i++) {
             all.products[i].isSelected = bool;
         }
     }
 },

这样，就可以实现购物车中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