在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