<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="vue.global.js"></script>
<title></title>
</head>
<body>
<div id="application">
<div class="container-md">
<template v-if="productList.length">
<table class="table" v-for="(tableItem,tableIndex) in productList">
<thead class="thead-light">
<tr>
<th>
<input type="checkbox" :checked="isCheckedTableItem(tableItem)" @click="handleTableItem(tableItem)" />{{tableItem.name}}
</th>
<th scope="col">序号</th>
<th scope="col">商品名称</th>
<th scope="col">商品单价</th>
<th scope="col">购买数量</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in tableItem.list">
<th>
<input type="checkbox" :checked="item.status" @click="handleChecked(item)">
</th>
<th scope="row">{{index+1}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(item)" :disabled="item.count == 1" class="btn btn-secondary">-</button>
{{item.count}}
<button @click="handleAdd(item) " class="btn btn-secondary">+</button>
</td>
<td><button @click="handleRemove(index,tableIndex)" class="btn btn-secondary">删除</button>
</td>
</tr>
</tbody>
</table>
<div>总价{{totalPrice}}</div>
<div><input type="checkbox" :checked="isCheckedAll()" @click="handleAll">全选</div>
</template>
<div v-else>购物车为空</div>
</div>
</div>
<script>
const app = {
data() {
return {
list: [
{
id: 1,
name: 'iphone14',
price: 6588,
count: 1,
status: 1
},
{
id: 2,
name: 'iphone14 pro',
price: 10488,
count: 1,
status: 1
},
{
id: 3,
name: 'MacBook',
price: 16488,
count: 1,
status: 1
}
],
productList:[
{
name:"张三的店",
list:[
{
id: 1,
name: 'iphone14',
price: 6588,
count: 1,
status: 1
},
{
id: 2,
name: 'iphone14 pro',
price: 10488,
count: 1,
status: 1
},
{
id: 3,
name: 'MacBook',
price: 16488,
count: 1,
status: 1
}
]
},
{
name:"李四的店",
list:[
{
id: 1,
name: 'iphone14',
price: 6588,
count: 1,
status: 1
},
{
id: 2,
name: 'iphone14 pro',
price: 10488,
count: 1,
status: 1
},
{
id: 3,
name: 'MacBook',
price: 16488,
count: 1,
status: 1
}
]
},
{
name:"老王的店",
list:[
{
id: 1,
name: 'iphone14',
price: 6588,
count: 1,
status: 1
},
{
id: 2,
name: 'iphone14 pro',
price: 10488,
count: 1,
status: 1
},
{
id: 3,
name: 'MacBook',
price: 16488,
count: 1,
status: 1
}
]
}
]
}
},
computed: {
totalPrice() {
let total = 0
for (let i = 0; i < this.productList.length; i++) {
for (let j = 0; j < this.productList[i].list.length; j++) {
let item = this.productList[i].list[j]
if (item.status)
total += item.price * item.count
}
}
return total.toLocaleString('en-US')
}
},
methods: {
handleReduce(item) {
if (item.count == 1)
return;
item.count--
},
handleAdd(item) {
item.count++
},
handleRemove(index, tableIndex) {
this.productList[tableIndex].list.splice(index, 1)
if (this.productList[tableIndex].list.length == 0)
this.productList.splice(tableIndex, 1)
},
handleChecked(item) {
item.status = !item.status
},
isCheckedAll() {
let status = true
for (let i = 0; i < this.productList.length; i++) {
for (let j = 0; j < this.productList[i].list.length; j++) {
if (!this.productList[i].list[j].status) { // if (this.list[i].status == false)
status = false
return status;
}
}
}
return status
},
handleAll() {
let status = this.isCheckedAll()
status = status ? 0 : 1
for (let i = 0; i < this.productList.length; i++) {
for (let j = 0; j < this.productList[i].list.length; j++)
this.productList[i].list[j].status = status
}
},
isCheckedTableItem(tableItem) {
let status = true
for (let i = 0; i < tableItem.list.length; i++) {
if (!tableItem.list[i].status) {
status = false
return status;
}
}
return status
},
handleTableItem(tableItem) {
let status = this.isCheckedTableItem(tableItem)
status = status ? 0 : 1
for (let i = 0; i < tableItem.list.length; i++)
tableItem.list[i].status = status
}
}
}
Vue.createApp(app).mount('#application')
</script>
</body>
</html>
注意引入 vue.global.js
实现效果