vant 实现全选功能

今天遇到了一个问题。实现类似淘宝的购物车全选/全不选效果。记录下这里面的问题：

这里面有这样几成逻辑：（我们把图中的京东，网易，天猫等看成一个模块）

1每一个单独模块有一个控制该模块是否全选的按钮，点击全选/全不选切换，该模块下的所有复选框要被勾选/全不勾选

同时每一个模块的全选/全不选按钮也会影响到整个页面最底部的全选按钮状态，当每个模块都会全选状态时，整个页面底部的全选按钮将被勾选

2每一个单独模块下的复选框被逐一勾选时，它会影响到两层元素，其一是它所在的模块。当全部被勾选时，该复选框所在模块的全选按钮将被勾选，其二，所有复选框被逐一勾选时，整个页面底部的全选按钮将被勾选

所以对于每一个复选框按钮，它将都会影响到两层元素。

我们先看一看大致结构：

注意：单个模块复选框我们利用van-check-group进行包裹。再看一看数据结构

每一个模块对应一条json，其中有两个非常重要的属性：isChecked，它用来控制当前模块的选中状态，另一个就是result：它用来记录单个模块中有多少个复选框被勾选了。我们在van-checkbox-group中通过v-model进行了绑定。

代码如下：

这里有2个地方需要解释：

1 result用途到底是啥？

van-checkbox-group的change事件会有一个v-model绑定的值。它的值是一个数组，记录了当前哪些复选框被选中了。我们不用官方写法。把result写在data里。因为所有的模块是循环出来，每一个模块我们都需要知道该模块下到底选中了哪些复选框，所以我们把result写在了arr数组的每一个json里。

2 如下代码到底是啥意思？

item.list.forEach(j=>{

item.result.push(j.title)

})

我们可以这么理解。它就是全选。因为对每一个模块来说，勾选一个，当前模块的result数组就添加了一个。反过来，当当前模块的result都被添满。也就是result的长度和当前模块（arr下的json下list）长度一致的时候。就表明全选了

这个效果已经实现了。但是它需要有两个依赖条件：

1 数据结构需要用这种格式

2 我们对van-checkbox-group需要通过v-model绑定result，而不是其他