关于全选的那些事

全选全不选，取消全选，这三个小功能，网上搜索了一下，普遍都是单选的按钮都是用input来实现，通过v-model来实现，通过v-model点击后的数据的长度与原数据的长度来进行比较，实现全选全不或者取消选择的功能。但是在如上的图片中，看出没有复选框让我们单击按钮。是由一个div来实现的，并没有input。那就没有v-model了，但其实思路都是一样的。手工全选和取消全选，我们可以根据事件来判断

 methods: {
    changeAllChecked() {
      if (this.allChecked) {
        // 全选
        for (let i = 0; i < this.data.module.length; i++) {
          if (this.data.module[i].module) {
            continue
          } else {
            this.data.module[i].isCheck = true
          }
        }
      } else {
        // 反选
        this.data.module.forEach(element => {
          element.isCheck = false
        })
      }
    },

单击的时候，通过两个数组来得到，checkList是来获取所有数组中的ischeck的情况。checkModel是来获取数组中isCheck为true的情况。通过判断checkList里面是否有存在false，来确实是否是否全选打勾。通过checkModel的监视，来根据他们的长度来判断是否全选打勾

  onButtonClick(item, index) {
      console.log('点击')
      item.isCheck = !item.isCheck
      this.checkModel = []
      this.checkList = []
      for (let i = 0; i < this.data.module.length; i++) {
        this.checkList.push(this.data.module[i].isCheck)
        if (this.data.module[i].isCheck) {
          this.checkModel.push(this.data.module[i].isCheck)
        } else {
          continue
        }
      }
      if (this.checkList.includes(false)) {
        this.allChecked = false
      } else {
        this.allChecked = true
      }
      // 数组更新操作，需要整个改变才能触发更新
      this.data.module.splice(index, 1, item)
    },