由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选、单选方案不合适，自己写了一个简单实用的。就短短的126行代码。
<table>
<tr>
<td><input type="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" v-model="checkAll">全选({{checkedCount}})</td>
<td>产品<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a></td>
<td>价格</td>
<td><a href="/tag/shuliang/" target="_blank" class="keywords">数量</a></td>
</tr>
<tr v-for="(item,$index) in lists">
<td><span v-show="checkedCount===lists.length || item.checked===true">我被选中</span><input type="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" :value="item.id" v-model="checked" @click="currClick(item,$index)"></td>
<td>{{item.productName}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
<tr>
总价：{{totalMoney}}
</tr>
</table>@H_404_7@
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);
}
});
}
}
}
}}
效果：
