vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法
更新時間:2018年02月09日 11:21:36 作者:Thekingyu
下面小編就為大家分享一篇vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
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) {//實現(xiàn)反選
_this.checkboxModel = [];
}else{//實現(xiàn)全選
_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;
}
},

以上這篇vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element UI + OSS實現(xiàn)上傳文件功能
這篇文章主要為大家詳細介紹了Vue Element UI + OSS實現(xiàn)上傳文件功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07
Vue按照順序?qū)崿F(xiàn)多級彈窗效果 附Demo
這篇文章主要介紹了Vue按照順序?qū)崿F(xiàn)多級彈窗效果 附Demo,通過實例代碼介紹了單個彈窗和多級彈窗的實現(xiàn)方法,感興趣的朋友跟隨小編一起看看吧2024-05-05
Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法(最新推薦)
這篇文章主要介紹了Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法(最新推薦),因為在el-table-column里,因為是多行,使用trigger="manual"?時,用v-model="visible"來控制時,控件找不到這個值,才換成trigger="click",需要的朋友可以參考下2024-03-03

