vue+element中checkbox 动态遍历分类全选

Question

elemet-ui官方文档中只是用的一个数组,当我服务器返回对象,我要怎么遍历这个对象最终把数据遍历出来每个分类都有全选和单选或多选的功能并且当我不是全部选中的时候全选状态又要动态变化

最终效果:

   标题1:  * 全选框  * 类型 * 类型 * 类型
   标题2:  * 全选框  * 类型 * 类型 * 类型
   

当我点击全选第一排的类型全部选中,当我三个类型没有全部选中,选项自动变成非全选
当我点击第一个是点击的标题1的全选标题2不能影响

数据用一个对象套数组来实现

哪位大神可以给点思路,菜鸟一枚

Answer 1

先确认一下需求：是不是类似下面的图片，左右两侧的全选互相独立，不影响呢？

如果是的话，代码逻辑很简单：

1.两个全选框的 v-model 绑定两个不一样的值
2.全选框绑定两个 change 事件，分别处理全选框各自下面的选项
3.下面的复选框组，绑定 change 事件，处理 全选框 的 model 值