vue 购物车合计效果
<template> <div class="wrap"> <el-table empty-text="购物车为空" :data="tableData" :summary-method="getSummaries" show-summary style="width: 100%"> <el-table-column label="商品名称" prop="name" width="100"> </el-table-column> <el-table-column label="商品单价" prop="price" width="130"> </el-table-column> <el-table-column label="购买数量" width="180" prop="num" > <template slot-scope="scope"> <el-button @click="sub(scope.$index, scope.row)">-</el-button> <span>{{scope.row.num}}</span> <el-button @click="add(scope.$index, scope.row)">+</el-button> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { name: 'HelloWorld', components: { }, data () { return { tableData: [{ price: '6188', name: 'iphone 7', num: 1 }, { price: '5188', name: 'iphone 11', num: 1 }, { price: '2188', name: 'iphone 8', num: 1 }, { price: '21888', name: 'ipad pro', num: 1 }] } }, methods: { // 减事件 sub (index, row) { if (row.num > 0) { row.num-- } }, // 加事件 add(index, row) { row.num++; }, // 删除事件 handleDelete(index, row) { this.tableData.splice(index,1) }, // 合计 getSummaries(param) { const { columns, data } = param; let sums = []; let sum = 0; columns.forEach((column, index)=>{ if (index === 0) { sums[index] = '总价'; return; } const values = data.map(item => Number(item[column.property])); if (index === 1) { this.tableData.forEach((item, index)=>{ sum += (item.price * item.num) }) console.log(sum) sums[index] = sum; } }) return sums; } } } </script> <style scoped> .wrap{ width: 500px; margin: 0 auto; } </style>