<template>
<div class=”bigbox”>
<div class=”box”>
<table>
<thead>
<tr>
<th>
<input type=”checkbox” v-model=”isall” />
<span>全选</span>
</th>
<th>商品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody v-for=”(obj, index) in list” :key=”index”>
<tr>
<td><input type=”checkbox” v-model=”obj.isdone” /></td>
<td>{
{ obj.name }}</td>
<td>{
{ obj.price }}</td>
<td>
<button
@click=”obj.count > 1 && obj.count–”
:disabled=”obj.count == 1″
>
—
</button>
<input type=”text” v-model=”obj.count” />
<button @click=”obj.count++”>+</button>
</td>
<td>{
{ obj.count * obj.price }}</td>
<td>
<button @click=”delfn(index)”>删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=”6″>总价格:{
{ allprice }}</td>
</tr>
</tfoot>
</table>
<shop :arr=”product”/>
</div>
</div>
</template>
<script>
import shop from “./components/shop.vue”;
export default {
components: {
shop,
},
data() {
return {
list: [
{ id: 1, name: “兰蔻小黑瓶”, price: 1080, count: 3, isdone: true },
{ id: 2, name: “欧莱雅套装”, price: 339, count: 1, isdone: true },
{ id: 3, name: “SK-II”, price: 1540, count: 10, isdone: true },
{ id: 4, name: “香奈儿5号”, price: 568, count: 3, isdone: true },
{ id: 5, name: “海洋之谜”, price: 4080, count: 1, isdone: true },
{ id: 6, name: “six god”, price: 12, count: 20, isdone: true },
],
product:[
{id:1,name:”韩国!赵露思同款大容量托特包包2022新款斜跨”,price:79,imga:”1.jpg_300x300q90.jpg_.jpg”},
{id:2,name:”Nike Court Borough Low 2 黑红女子低帮运动休闲版”,price:421,imga:”2.jpg_300x300q90.jpg_.jpg”},
{id:3,name:”意式极简真皮主卧室家具小户型简约”,price:5150,imga:”3.jpg_300x300q90.jpg_.jpg”},
]
};
},
methods: {
delfn(index) {
return this.list.splice(index, 1);
},
},
computed: {
isall: {
get() {
return this.list.every((obj) => obj.isdone == true) && this.list.length != 0;
},
set(val) {
return this.list.map((obj) => (obj.isdone = val));
},
},
allprice() {
let aum = 0;
this.list.forEach((obj) => {
if (obj.isdone == true) {
aum += obj.count * obj.price;
aum += 1;
}
});
return aum;
},
},
};
</script>
<style>
.bigbox{
width:100%
}
.box{
width:999px;
margin: 0 auto;
margin-top:20px ;
}
table {
user-select: none;
border-collapse: collapse;
margin: 0 auto;
}
td,
th {
border: 1px solid gray;
padding: 5px 30px;
text-align: center;
}
/* //属性选择器 */
[type=”text”] {
width: 50px;
text-align: center;
}
</style>