vue 实现多组合复选框案例

完成效果如图：

当我们点击标题全选时  指定店铺所有商品都被选中，取消时全取消

当我们选择某店铺商品数量等于该店铺所有商品时，该店铺全选按钮被选中

 

废话不多说，代码呈上  欢迎给出更好的方案实现该功能

----------------------------------------------------    goods_select.vue    ------------------------------------------------------------------

 

 

--------------------------------------------------------------------模拟数据格式 -------------------------------------------------------------

 

import goodImg from "../src/assets/image/login/bgi.jpg"
const datas = [
    {
        Mall:{
            name:"缤纷果园-花园路店",
            id:"hk",
        },
        Mall_detail:[{
            id:'hk_1',
            img:goodImg,
            title:'[自营] 越南火龙果',
            num:'火龙果约500g/个',
            compare:'赠菜豆30个',
            rate:'x2'
        },{
            id:'hk_2',
            img:goodImg,
            title:'[自营] 越南火龙果',
            num:'火龙果约500g/个',
            compare:'赠菜豆30个',
            rate:'x2'
        },{
            id:'hk_3',
            img:goodImg,
            title:'[自营] 越南火龙果',
            num:'火龙果约500g/个',
            compare:'赠菜豆30个',
            rate:'x2'
        }]
    },
    {
        Mall:{
            name:"缤纷果园-槐树路店",
            id:"yy",
        },
        Mall_detail:[{
            id:'yy_1',
            img:goodImg,
            title:'[自营] 越南MV果',
            num:'MV果约50g/个',
            compare:'赠菜豆30个',
            rate:'x1'
        },{
            id:'yy_2',
            img:goodImg,
            title:'[自营] 越南MV果',
            num:'MV果约50g/个',
            compare:'赠菜豆30个',
            rate:'x1'
        },{
            id:'yy_3',
            img:goodImg,
            title:'[自营] 越南MV果',
            num:'MV果约50g/个',
            compare:'赠菜豆30个',
            rate:'x1'
        }]
    }
]

export default datas