实现效果:
Html文件:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>购物车(vue的二维数组)</title>
<link rel="stylesheet" href="购物车.css">
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th><input type="checkbox" @click="handleAllChecked" :checked="checkall">全选</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<template v-for="(title, index1) in list">
<tr>
<th>{{ title.title_name }}</th>
</tr>
<tr v-for="(item, index2) in title.content">
<td>{{ index2 +1 }}</td>
<td>
<input type="checkbox" @click="handleChecked(index1, index2)" :checked="item.check">
</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button @click="handleReduce(index1, index2)" :disabled="item.count === 1">-</button>
<span>{{ item.count }}</span>
<button @click="handleAdd(index1, index2)">+</button>
</td>
<td>
<button @click="handleRemove(index1, index2)">移除</button>
</td>
</tr>
</template>
</tbody>
</table>
<div>总价: ¥{{ totalPrice }}</div>
</template>
<div v-else>购物车是空的</div>
</div>
</body>
<script src="../../vue.js"></script>
<script src="购物车.js"></script>
</html>
Css文件:
[v-cloak]{
display: none;
}
table{
border: 1px solid #e9e9e9;
border-collapse: collapse; /* 合并表格边框 */
border-spacing: 0px; /* 相邻单元格的边框间的距离 */
empty-cells: hide; /* 表格中空单元格上的边框和背景 */
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
text-align: center;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap; /* 段落中的文本不进行换行 */
}
td>span{
display: inline-block;
text-align: center;
width: 30px
}
td>button{
margin: 0 3px;
}
js文件(vue):
var app = new Vue({
el: '#app',
data:{
checkall: false,
list:[
{
title_name: '手机',
content: [
{ id: 1, name: '小米9', price: 3099, count: 9, check: false,
},
{ id: 2, name: '华为30', price: 4888, count: 1, check: false,
},
{ id: 3, name: 'Vivo20', price: 3199, count: 1, check: false,
},
]
},
{
title_name: '日常用品',
content: [
{ id: 1, name: '牙刷', price: 88, count: 1, check: false,
},
{ id: 2, name: '毛巾', price: 58, count: 1, check: false,
},
{ id: 3, name: '口杯', price: 28, count: 1, check: false,
},
]
},
{
title_name: '学习用品',
content: [
{ id: 1, name: '签字笔', price: 18, count: 1, check: false,
},
{ id: 2, name: '橡皮', price: 8, count: 1, check: false,
},
{ id: 3, name: '笔记本', price: 2, count: 1, check: false,
},
]
},
],
},
computed:{
totalPrice: function(){
var total = 0;
for( var i = 0; i < this.list.length; i++){
var item = this.list[i];
for(var j = 0; j<item.content.length; j++){
var items = item.content[j];
if(items.check === true){
total += items.price * items.count;
}
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,','); //3位式显示金额
},
},
methods:{
handleReduce: function(index1, index2){
if(this.list[index1].content[index2].count === 1) return; //商品数量等于‘1’时,关闭按钮
this.list[index1].content[index2].count--; //商品数量减一
},
handleAdd: function(index1, index2){
this.list[index1].content[index2].count++; //商品数量加一
},
handleRemove: function(index1, index2){
this.list[index1].content.splice(index2, 1);
},
handleChecked: function(index1, index2){
this.list[index1].content[index2].check = !this.list[index1].content[index2].check //切换选项选中状态
if(this.list[index1].content[index2].check === false){ //当有选项未选中时,取消全选情况
this.checkall = false;
}
},
handleAllChecked: function(){ //全选 or 取消全选
if(this.checkall === false){
for(var i=0; i<this.list.length; i++){
for(var j=0; j<this.list[i].content.length; j++){
this.list[i].content[j].check = true;
}
}
this.checkall = true;
}
else if(this.checkall === true){
for(var i=0; i<this.list.length; i++){
for(var j=0; j<this.list[i].content.length; j++){
this.list[i].content[j].check = false;
}
}
this.checkall = false;
}
},
},
});