vue checkbox 实现全选，取消全选

背景：在vue项目中引入了jq的datatables表格插件，自己在每行的第一项添加了一个checkbox

         那么如何实现全选，取消全选，拿到checked=true的值呢？

解决方案：

一：获取到checked=true的值：

<input type="checkbox" class="inputcheckbox" name="" v-model="checked" :value="data[index]">复制代码

checked 为数组 【 】

我们最后打印this.checked 就可以拿到checked=true的所有值！

二：所有的checkbox选中如何触发thead的input checkbox也选中？

<input type="checkbox" :checked="data.length === checked.length" class="inputcheckbox" name="select_all" @click="checkedAll">复制代码

data 是表格里所有的值,checked是checked=true的值

三：点击表头的input checkbox 如何将所有checkbox全选 ？

data return {} 中定义       isCheckedAll: false,
复制代码

checkedAll () {  // 点击全选checkbox会触发此事件
      //  全选后 取消其中一个checkbox的选中状态  此时isCheckedAll还是true ，优化后再次点击依旧是全选
      if (this.data.length !== this.checked.length && this.isCheckedAll === true) {
        this.isCheckedAll = true
      } else {
        this.isCheckedAll = !this.isCheckedAll
      }
      if(this.isCheckedAll) {    //  全选
        this.checked = []
        this.data.forEach(function (data) {
          this.checked.push(data)
        }, this)
      } else {
        this.checked = [] //  取消全选
      }
    },
复制代码