vue 购物车（含加减）效果

<template>
    <div class="shoppingCar">
        <div class="shopingWrap">
          <p>购物清单</p>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="author"
              label="商品信息"
              width="180">
            </el-table-column>
            <el-table-column
              prop="pageviews"
              label="单价"
              width="180">
            </el-table-column>
            <el-table-column
              prop="num"
              label="数量">
              <template slot-scope="scope">
                <el-button @click="Reduction(scope.$index, scope.row, -1)" size="small">-</el-button>
                <el-input v-model="scope.row.num" class="inp"></el-input>
                <el-button @click="Reduction(scope.$index, scope.row, 1)"  size="small">+</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="total"
              label="小计">
              <template slot-scope="scope">
                <span>{{scope.row.total}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="删除">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="goodsTotil">
            <el-row>
              <el-col :span="8"><span>共计{{ totleNum }}件商品</span></el-col>
              <el-col :span="8">
                <div>应付总额￥{{amount}}</div>
                <div>(优惠￥500)</div>
              </el-col>
              <el-col :span="8">
                <el-button>现在结算</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
    </div>
</template>

<script>
import { goodsList } from '../../api/electricity'
export default {
  name: 'shoppingCart',
  data() {
    return {
      tableData: [],
      totleNum: 0
    }
  },
  created() {
    this.goodsList()
  },
  computed: {
    amount: {
      get(){
        let bbb = 0;
        this.tableData.forEach((item, index )=>{
          item.total = (item.num) * (item.pageviews)
          bbb += item.total
        })
        return bbb
      },
      set(val){}

    }
  },
  methods: {
// 获取购物车数据
    goodsList() {
      goodsList().then(response => {
        this.tableData = response.data.items
        this.tableData.forEach((item, index) => {
          this.$set(item, 'num', index + 1)  // 这是新添加得属性，后期如果要修改一定要使用this.$set添加；
          item.total = (item.num) * (item.pageviews)
          this.amount += item.total
        })
        this.totleNum = this.tableData.length
      })
    },
    // 删除按钮
    handleClick(index, row) {
      this.tableData.splice(index, 1)
      this.totleNum = this.tableData.length
    },
    // 购物车加减事件
    Reduction(index, row, type) {
      if (type === -1) {
        if (row.num >= 2) {
          row.num--;
          this.$set(this.tableData[index],'num', row.num )
        } else {
          this.$set(this.tableData[index],'num', 1 )
        }
      } else if (type === 1) {
        row.num++;
        this.$set(this.tableData[index],'num', row.num )
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .shoppingCar{
    width: 100%;
    height: 500px;
    background: #eee;
    padding: 20px;
  }
  .shopingWrap{
    width: 100%;
    height: 400px;
    border-radius: 5px;
    background: #fff;
    padding: 15px;
  }
  .goodsTotil{
    margin-top:20px;
  }
  /deep/.el-input{
    width: 38px;
    /deep/.el-input__inner{
      height: 33px;
      width: 38px;
      padding: 0;
      text-align: center;
    }
  }

</style>