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>