vue的多層input checkbox全選，全不選

提要：項目中之前都是一層checkbox選擇，書寫比較簡單。這次項目中遇到了多層。雖說邏輯不復雜，但是書寫中也遇到問題，並且對watch有新的理解。本文不啰嗦css和布局內容。主要描述雙向綁定和數據的獲取。

第一步：看靜態頁面最終效果圖和HTML結構布局。

圖一說明：點擊灰色背景區域的父級地址名稱，緊鄰的下方白色背景的子集訂單被選中。點擊全選按鈕所有checkbox都選中。

圖2.3說明：圖2是雙層v-for循環。每個子集的input綁定了相同的v-model值。並且綁定了value值。圖三綁定了v-modell並且綁定了事件change.

第二步：數據data聲明和重構。

 

因為我們的子集v-model值是動態生成的，所以我們再請求到列表數據todolist以后需要對dataModel進行結構重組。可以把每個子集列表綁定的value值對應放入dataModel中。

重組代碼如下：

var len = this.todolist.length;
for (var i = 0; i < len; i ++) {
     var item1 = {value1: []};
     this.dataModel.push(item1);
}

第三步，監聽dataModel中雙向綁定的數據變化，通過變化去控制父級是否選中，全選是否選中，選中的訂單數量總數。

 代碼說明：此處的dataModel是數組里面嵌套數組對象，所以我們需要深度監聽。深度監聽的固定語法結構

*****:{
  handler(){
    /*需要做的事情巴拉巴拉巴拉*/
  },
  deep:true
}

　同時需要說明自己當時進入誤區的一點，監聽的這么多data里面建議只監聽子集內容dataModel,,不要監聽其他的checkbox 綁定的v-model值，否則容易出現死循環。嘎嘎嘎嘎，我就卡死了。

watch:{
    dataModel:{
      handler (val) {
        this.allValue = [];
        //控制父級
        for(var i=0;i<val.length;i++){
          if(!this.todolist[i]){
            return false;
          }
          if(val[i].value1.length == this.todolist[i].TrtplpomainGroupByList.length){
            this.allValue.push(i)
          }
        }
        this.count();
        //控制全選按鈕
        if(this.allValue.length == this.todolist.length){
          this.resultSele = true;
        }else{
          this.resultSele = false;
        }
      },
      deep:true
    },
  },

　第四步，點擊父級的按鈕，觸發的事件。和計算總數的方法。其中通過列表index索引號找尋數據

    //計算選中的總數
    count(){
      this.totalNum = 0;
      for(var i=0;i<this.dataModel.length;i++){
        this.totalNum += this.dataModel[i].value1.length;
      }
    },
    //父級點擊
    changeSele(value,index){
      var check = false;
      for(var i=0;i<this.allValue.length;i++){
        if(this.allValue[i] == index){
          check = true;
        }
      };
      if(check){
        this.dataModel[index].value1 = [];
        for(var i =0;i<value.length;i++){
          this.dataModel[index].value1.push(value[i]);
        };
      }else{
        this.dataModel[index].value1 = [];
      }
    },

　　第五步點擊全選按鈕的方法。不論是否選擇了，先清空dataModel值，然后再根據全選按鈕是否選中resultSele的值來重新給dataModel賦值。因為雙向綁定，所以dataModel中只要有值，input的就響應選中。

    //點擊全選按鈕
    resultSeleF(){
      var len = this.todolist.length;
      this.dataModel = [];
      for (var i = 0; i < len; i ++) {
        var item1 = {value1: []};
        this.dataModel.push(item1);
      };
      if(this.resultSele){
        for (var i = 0; i < len; i ++) {
          for(var j=0;j<this.todolist[i].TrtplpomainGroupByList.length;j++){
            var ctx = this.todolist[i].TrtplpomainGroupByList[j];
            this.dataModel[i].value1.push(ctx);
          };
        }
      }
    }

　　以上為，多層input選擇的vue的書寫方式。如果有不對的地方歡迎指正。代碼寫的不是特別好，哈哈哈哈。一下圖片為最終效果gif圖。為了個圖做了好久。菜雞的我飄過~~~~~