vue2.0中vue-cli实现全选、单选计算总价格的实例代码
本篇文章主要介绍了vue2.0中vue-cli实现全选、单选计算总价格的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选、单选方案不合适,自己写了一个简单实用的。就短短的126行代码。
template div table td input type="checkbox" v-model="checkAll" 全选({{checkedCount}}) /td td 产品名称 /td td 价格 /td td 数量 /td /tr tr v-for="(item,$index) in lists" td span v-show="checkedCount===lists.length || item.checked===true" 我被选中 /span input type="checkbox" :value="item.id" v-model="checked" @click="currClick(item,$index)" /td td {{item.productName}} /td td {{item.price}} /td td {{item.count}} /td /tr 总价:{{totalMoney}} /tr /table /div /template script export default{ data() { return { checked:[], totalPrice:[], lists : [ productName:'产品1', price:'24', count:'3', id:1 productName:'产品2', price:'25', count:'6', id:2 productName:'产品3', price:'54', count:'7', id:3 computed:{ totalMoney:function(item,index){ let sum = 0; for(let i=0;i this.totalPrice.length;i++){ sum += this.totalPrice[i]; return sum; checkAll: { get: function() { return this.checkedCount == this.lists.length; set: function(value){ var _this = this; if (value) { this.totalPrice = []; this.checked = this.lists.map(function(item) { item.checked = true; let total = item.price*item.count; _this.totalPrice.push(total); return item.id }else{ this.checked = []; this.totalPrice=[]; this.lists.forEach(function(item,index){ item.checked = false; checkedCount: { get: function() { return this.checked.length; methods:{ currClick:function(item,index){ var _this = this; if(typeof item.checked == 'undefined'){ this.$set(item,'checked',true); let total = item.price*item.count; this.totalPrice.push(total); console.log(this.totalPrice); }else{ item.checked = !item.checked; if(item.checked){ this.totalPrice = []; this.lists.forEach(function(item,index){ if(item.checked){ let total = item.price*item.count; _this.totalPrice.push(total); }else{ this.totalPrice = []; this.lists.forEach(function(item,index){ if(item.checked){ let total = item.price*item.count; _this.totalPrice.push(total); /script style tr td{ width:200px; background: #eee; padding:10px 0;