vue+antd实现购物车

使用：vue框架+antd第三方组件

<template>
	    <div class="shopping-card">
      <div class="card-title">
        我的购物车
      </div>
      <div class="card-table">
        <a-table
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          :columns="columns"
          :data-source="shoppingData"
          :pagination="false"
        >
          <div style="width: 150px" slot="num" slot-scope="text, record">
            <a-button :disabled="record.num <= 1" @click="spliceNum(record.id)">
              -
            </a-button>
            <a-input style="width: 40px" placeholder="1" v-model="record.num" />
            <a-button @click="addNum(record.id)">
              +
            </a-button>
          </div>
          <div
            style="width: 50px;cursor: pointer"
            slot="action"
            slot-scope="text, record"
          >
            <div @click="deleteShopping(record.id)">删除</div>
          </div>
        </a-table>
      </div>
      <div class="card-end">
        总计：<span style="color: red;font-size: 20px">{{ totalPrice }}</span
        >元
      </div>
    </div>
</template>

<script>
export default {
	data() {
		columns: [
	        {
	          title: "商品名称",
	          key: "name",
	          dataIndex: "name",
	          align: "center"
	        },
	        {
	          title: "商品单价",
	          key: "price",
	          dataIndex: "price",
	          align: "center"
	        },
	        {
	          title: "购买数量",
	          key: "num",
	          dataIndex: "num",
	          slots: { title: "num" },
	          scopedSlots: { customRender: "num" },
	          align: "center"
	        },
	        {
	          title: "小计",
	          key: "",
	          dataIndex: "singerNum",
	          align: "center"
	        },
	        {
	          title: "操作",
	          key: "action",
	          dataIndex: "action",
	          slots: { title: "action" },
	          scopedSlots: { customRender: "action" },
	          align: "center"
	        }
	     ],
	           shoppingData: [
        {
          id: 0,
          name:
            "极米 （XGIMI ）Play特别版 投影机 投影仪 家用 便携（单手可握 侧投 HDR10解码哈曼卡顿音响内置电池）",
          price: 2499,
          num: 1,
          singerNum: 2499
        },
        {
          id: 1,
          name:
            "荣耀MagicBook 2019 14英寸轻薄窄边框笔记本电脑（AMD锐龙7 3700U 8G 512G FHD IPS 指纹解锁）冰河银",
          price: 4985,
          num: 1,
          singerNum: 4985
        },
        {
          id: 2,
          name: "盼盼 手撕面包 饼干蛋糕整箱大礼包箱装 奶香味2000g",
          price: 52.5,
          num: 1,
          singerNum: 52.5
        },
        {
          id: 3,
          name: "洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶",
          price: 56,
          num: 1,
          singerNum: 56
        },
        {
          id: 4,
          name:
            "联想 K5 Note 4GB+64GB 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑",
          price: 999,
          num: 1,
          singerNum: 999
        },
        {
          id: 5,
          name:
            '小米MIX2 全面屏游戏手机 6GB+64GB 黑色 全网通4G手机 双卡双待 5.99"大屏',
          price: 1299,
          num: 1,
          singerNum: 1299
        },
        {
          id: 6,
          name:
            "Apple MacBook Pro 15.4英寸笔记本电脑 银色（2017款Multi-Touch Bar/Core",
          price: 15888,
          num: 1,
          singerNum: 15888
        },
        {
          id: 7,
          name:
            "OPPO R15 全面屏双摄拍照手机 4G+128G 幻色粉 全网通 移动联通电信",
          price: 2799,
          num: 1,
          singerNum: 2799
        }
      ],
      selectedRowKeys: [], // Check here to configure the default column
      totalPrice: 0
	},
	methods: [
	  onSelectChange(selectedRowKeys) {
	      this.totalPrice = 0
	      console.log("selectedRowKeys changed: ", selectedRowKeys);
	      this.selectedRowKeys = selectedRowKeys;
	      this.shoppingData.map(shopping => {
	        this.selectedRowKeys.map(selected => {
	          if(shopping.id == selected) {
	            this.totalPrice = this.totalPrice + shopping.singerNum
	          }
	        })
	        return shopping
	      })
    },
    spliceNum(id) {
      this.totalPrice = 0
      console.log(id);
      this.shoppingData.map(shopping => {
        if (shopping.id == id) {
          --shopping.num;
          shopping.singerNum = shopping.num * shopping.price;
        }
        this.onSelectChange(this.selectedRowKeys)
        return shopping;
      });
    },
    addNum(id) {
      this.totalPrice = 0
      console.log(id);
      this.shoppingData.map(shopping => {
        if (shopping.id == id) {
          ++shopping.num;
          shopping.singerNum = shopping.num * shopping.price;
        }
        this.onSelectChange(this.selectedRowKeys)
        return shopping;
      });
    },
    deleteShopping(id) {
      this.shoppingData.map((shopping,index) => {
        if (shopping.id == id) {
          this.shoppingData.splice(index, 1);
        }
      });
      this.onSelectChange(this.selectedRowKeys);
    }
	]
}
</script>

<style scoped>
.shopping-card {
  margin: 50px;
  border: 1px solid #c2bbbb;
}
.card-title {
  text-align: left;
  height: 50px;
  line-height: 50px;
  background: #c2bbbb;
}
.card-end {
  text-align: right;
  height: 50px;
  line-height: 50px;
  background: #c2bbbb;
  padding-right: 20px;
}
</style>

实现效果：