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 = [] //  取消全選
      }
    },
複製程式碼