vue checkbox 全选 数据的绑定及获取和计算

html

<input  type='checkbox'  v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll">

第一个CheckBox

<span><input  type='checkbox' v-model='checked' v-on:click='checkedAll'><span class="select-all">全选</span></span>

第二个

定义

return {
  dianji:'12',
  list: [],
  value:{},
  value1:{},
  checkAll: false,
  checkArr:[],
  checkboxModel:[],
  wodeshi:'0',
  checked:false
}

lll: function(){
  var self = this;
  var sum=0;
  setTimeout(function(){
    for(var x in self.checkboxModel){
      sum +=  parseInt(self.checkboxModel[x].split('-')[1])
    }
    self.wodeshi=sum;
  },0)
  // console.log(self.checkboxModel)
},

checkedAll: function() {
  var _this = this;
  if (this.checked) {//实现反选
    _this.checkboxModel = [];
  }else{//实现全选
    _this.checkboxModel = [];
    _this.list.forEach(function(z) {
      _this.checkboxModel.push(z.coach_id+'-'+z.amount);
    });
  }
  if(_this.checkboxModel.length==0){
    this.wodeshi=0;
    // console.log(_this.checkboxModel);
  }else {
    var self =this;
    var sum =0;
    for(var x in self.checkboxModel){
      sum +=  parseInt(self.checkboxModel[x].split('-')[1])
    }
    self.wodeshi=sum;
  }
},