<template>
<div>
<el-table
:data="books"
style="width: 100%">
<el-table-column
label="序号"
width="180">
<template slot-scope="scope">
<i class="el-icon-star-off"></i>
<span style="margin-left: 10px">{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column
label="商品名称"
width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>商品名称: {{ scope.row.title }}</p>
<p>单价: {{ scope.row.price }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.title }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="单价"
width="180">
<template slot-scope="scope">
<p>{{ scope.row.price }}</p>
</template>
</el-table-column>
<el-table-column
label="数量"
width="180">
<template slot-scope="scope">
<p>{{ scope.row.count }}</p>
</template>
</el-table-column>
<el-table-column
label="金额"
width="180">
<template slot-scope="scope">
<p>{{itemPrice(scope.row.price, scope.row.count)}}</p>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="primary" plain
size="mini"
@click="scope.row.count += 1">加数量</el-button>
<el-button
type="primary" plain
size="mini"
@click="scope.row.count -= 1">减数量</el-button>
<el-button
size="mini"
type="danger"
@click="deleteItem(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-divider content-position="right">总价: {{totalPrice}}</el-divider>
</div>
</template>
<script>
export default {
name: 'shoppingCar',
props: {
msg: String
},
data(){
return{
books:[
{
id: 1,
title: 'Vue.js无难事',
price: 98,
count: 1
},
{
id: 2,
title: 'VC++深入详解',
price: 168,
count: 1
},
{
id: 3,
title: 'Servlet/JSP深入详解',
price: 139,
count: 1
},
]
};
},
directives:{
inserted:function(el) {
el.focus
}
},
methods: {
itemPrice(price, count) {
return price * count;
},
deleteItem(index) {
this.books.splice(index, 1);
}
},
computed: {
totalPrice() {
var total = 0;
for (let book of this.books) {
total += book.price * book.count;
}
return total;
}
}
}
</script>
<style scoped>
[v-clock] {
display: none;
}
</style>