<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table class="table">
<thead>
<tr>
<td>
<input type="checkbox" v-model="quanxuan">全选
</td>
<td>id</td>
<td>名称</td>
<td>数量</td>
<td>价格</td>
<td>小计</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in shopList" :key="item.id">
<td>
<input type="checkbox" v-model="item.status">
</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td>{{item.price*item.num}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
{{getNum}}
{{getPrice}}
</td>
</tr>
</tfoot>
</table>
</div></body>
<script src="./vue-2.6.12.js"></script>
<script>
new Vue({
el: '#app',
data: {
shopList: [
{ id: 1, name: '手机', price: 5000, num: 10, status: false },
{ id: 2, name: '电脑', price: 4000, num: 100, status: false },
{ id: 3, name: '平板', price: 3000, num: 200, status: false },
{ id: 4, name: '手机壳', price: 50, num: 10000, status: false },
]
},
computed: {
quanxuan: {
get() {
return this.shopList.every(ele=>ele.status)
},
set(val) {
this.shopList.forEach(ele => {
ele.status = val
});
}
},
getNum() {
return this.shopList.reduce((sum, item, ele) => {
console.log(sum, item.num, ele);
if(item.status == true){
sum += item.num
}
return sum
}, 0)
},
getPrice() {
return this.shopList.reduce((price, ele) => {
// console.log(price,ele);
if(ele.status == true){
price += ele.price*ele.num
}
return price
}, 0)
}
}
})
</script>
</html>
1471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
