在html页面中利用vue+element写购物车
话不多说上代码~~
选择数据后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta count="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车页面</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
#app{
width: 1700px;
margin: 0 auto;
background-color: #eeee;
}
.totalPrice{
color: tomato;
padding: 0 10px;
font-size: 20px;
background-color: #eee;
height: 80px;
line-height: 80px;
}
.totalPrice span{
color: #000;
}
.rmb{
color: tomato;
}
.header{
height: 30px;
}
.hLeft{
font-weight: 600;
padding-left: 10px;
}
.hRight{
float: right;
display: inline-block;
padding: 0 50px 0 0;
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<span class="hLeft">全部商品</span>
<span class="hRight">
已选商品:
<span style="color: tomato;">{{totalCount}}</span>
</span>
</div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="商品信息"
width="600"
>
<template slot-scope="scope">{{ scope.row.storeName }}</template>
</el-table-column>
<el-table-column
align="center"
prop="count"
label="数量"
>
<template slot-scope="scope">
<el-input-number v-model="scope.row.count" @change="handleChange(scope.row)" :min="1" :max="200" label="描述文字"></el-input-number>
</template>
</el-table-column>
<el-table-column
prop="price"
label="单价"
show-overflow-tooltip>
<template slot-scope="scope">
<span class="rmb">¥</span>
{{scope.row.price}}
</template>
</el-table-column>
<el-table-column
prop="je"
label="小计"
show-overflow-tooltip>
<template slot-scope="scope">
<span class="rmb">¥</span>
{{scope.row.je}}
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="totalPrice">
<span >结算：</span>
¥
<span>{{totalPrice}}</span>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
tableData: [{
storeName: '粮油03',
count: 2,
price: 200,
je:'',
}, {
storeName: '粮油02',
count: 1,
price: 100,
je:'',
}, {
storeName: '粮油04',
count: 3,
price: 100,
je:'',
}, {
storeName: '粮油01',
count: 4,
price: 100,
je:'',
}, {
storeName: '粮油08',
count: 6,
price: 100,
je:'',
}, {
storeName: '粮油06',
count: 10,
price: 100,
je:'',
}, {
storeName: '粮油07',
count: 1,
price: 100,
je:'',
}],
multipleSelection: [],
// 总价
totalPrice:0,
// 已选商品
totalCount:0,
}
},
mounted(){
this.tableData.filter(item=>{
item.je = item.count*item.price
return item
})
},
methods:{
// 计数器变化
handleChange(row) {
console.log('数量',row);
this.tableData.filter(item=>{
if(item.storeName==row.storeName){
item.je = item.count*item.price
return item
}
})
// 2.计算总价
this.total()
},
// 计算总价
total(){
this.totalPrice=0
this.totalCount=0
if(this.multipleSelection){
this.multipleSelection.forEach(item1=>{
this.tableData.forEach(item2=>{
if(item1.storeName==item2.storeName){
this.totalPrice += item2.je
console.log('item2',item2)
this.totalCount+=item2.count
}
})
})
}
},
// 删除
deleteRow(index, rows) {
rows.splice(index, 1);
// 2.计算总价
this.total()
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
// 2.计算总价
this.total()
console.log('选中')
}
}
})
</script>
</html>
