vue checkbox实现动态全选

和其他例子不同的是，本例中“全选”按钮是动态加载的，即全选按钮，是取决于数组的长度，而子选项列表是子数组的项。请看下面数据结构

数据结构：

父级全选框循环数组，而子集循环数组的value数组

    [
        { id: 0, name: "test1", value: [800001, 800002, 800003] },
        { id: 1, name: "test2", value: [400001] },
        { id: 2, name: "test3", value: [8232222, 8232242] }
    ]

##理解vue checkbox表单输入绑定 和以往处理checkbox的思路不同，vue的重点是维护v-model绑定的一个数组，这个数组中的数据就是选中的checkbox的数据，数组为空，说明没有选中任何一项。 了解详情请看官网例子

代码：

html代码

 <div v-for="(items,index) in Products" :key="items.id">
        <input type="checkbox"  :value="items.id" v-model="parentList" @change="changeAllChecked(items.id)"  >
        <label>{{items.name}}</label>
        <div v-for="(item,i) in items.value" :key="i">
            <input type="checkbox" :value="item" v-model="childList"  @change="itemcheck(item)"/>
             <label>{{item}}</label>
        </div>
</div>

js代码：

export default {
  name: "test",
  data() {
    return {
      childList: [], //子选项列表
      parentList: [], //父级全选列表
      Products: [
        { id: 0, name: "test1", value: [800001, 800002, 800003] },
        { id: 1, name: "test2", value: [400001] },
        { id: 2, name: "test3", value: [8232222, 8232242] }
      ]
    };
  },
  methods: {
    //*********************控制全选start****************//
    
    getParent(i) {//获取父级数组
      let t = this;
      let list = t.Products.filter(item => {
        return item.value.indexOf(i) > -1;
      });
      return list[0];
    },
    itemcheck(p) {//点击子checkbox
      let t = this;
      setTimeout(() => {
      //change事件会在dom的value值返回之前触发，所以用setTimeout等待值返回后，再处理数组
        let ischeck = t.childList.filter((items, i) => {
          return items == p;
        }).length;
        if (ischeck > 0) {
          //控制子项全选后，父级全选框要选中
        } else {
        //控制取消子项选择后，父级的全选框要取消选中
          let index = t.parentList.indexOf(t.getParent(p).id);
          if (index > -1) {
            t.parentList.splice(index, 1);
          }
        }
        console.log(t.parentList);
      });
    },
    changeAllChecked(p) {//点击全选按钮，子集全选和，点击取消全选按钮，子集取消全选
      let t = this;
      if (t.parentList.length > 0) {
        t.childList = [];
        t.parentList.forEach((items, i) => {
          t.Products[items].value.forEach(item => {
            if (t.childList.indexOf(item) < 0) {
              t.childList.push(item);
            }
          });
        });
      } else {
        t.childList = [];
      }
    }
    //*********************控制全选end****************//
  }
};