实战//简单的购物车功能实现

爱吃松果的美美

于 2021-07-30 16:24:46 发布

阅读量131

点赞数

分类专栏：实战 # 刷题文章标签： vue js

本文链接：https://blog.csdn.net/weixin_37877794/article/details/119250681

版权

刷题同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

实战

6 篇文章 2 订阅

订阅专栏

本文对比了原生HTML table与Element UI的el-table在Vue中构建购物车功能的实现方式，包括商品列表编辑与操作。原生table使用了模板和双向数据绑定，而el-table则提供了更丰富的列交互和数据管理功能。

摘要由CSDN通过智能技术生成

文章目录

这个做的不错：vue3.x案例购物车

- 要求

在这里插入图片描述

1、原生 table 实现

<template>
  <div id="shop-cart">
    <table border="1" cellspacing="0" cellpadding="0" width="800" style="margin: 0 auto;">
      <tr>
        <th>商品名称</th>
        <th>商品数量</th>
        <th>商品单价</th>
        <th>商品小计</th>
        <th>商品操作</th>
      </tr>

      <template v-for="item in orders">
        <tr :key="item.name">
          <td>{{ item.name }}</td>
          <td><input v-model="item.number" type="number"></td>
          <td>{{ item.price }}</td>
          <td>{{ item.price_all }}</td>
          <td><span @click="deleteFood(item)">删除商品</span></td>
        </tr>
      </template>
    </table>
    <br>
    <br>
    <br>
    <br>
    <table border="1" cellspacing="0" cellpadding="0" width="800" style="margin: 0 auto;">
      <tr>
        <th>商品名称</th>
        <th>商品单价</th>
        <th>添加商品</th>
      </tr>

      <template v-for="item in foods">
        <tr :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td><span @click="addFood(item)">添加商品</span></td>
        </tr>
      </template>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Card',
  data() {
    return {
      orders: [],
      foods: [{
        name: '鱼香肉丝',
        price: '25'
      }, {
        name: '酸菜鱼',
        price: '40'
      }, {
        name: '蚂蚁上树',
        price: '50'
      }, {
        name: '佛跳墙',
        price: '75'
      }, {
        name: '肉夹馍',
        price: '10'
      }, {
        name: '羊肉泡沫',
        price: '30'
      }, {
        name: '凉皮',
        price: '6'
      }, {
        name: '冰峰',
        price: '2'
      }]

    }
  },
  watch: {
    orders: {
      handler(arr) {
        arr.map(item => {
          this.$set(item, 'price_all', item.number * item.price)
        })
      }, deep: true
    }
  },
  methods: {
    deleteFood(food) {
      var activeIndex = null
      this.orders.map((item, index) => {
        if (item.name == food.name) {
          activeIndex = index
        }
      })
      this.orders.splice(activeIndex, 1)
    },
    addFood(food) {
      this.$set(food, 'number', 1)
      this.orders.push(food)
    }
  }
}
</script>

2、el-table 实现

<!--  -->
<template>
  <div>
    <el-row>
      <el-table :data="carList">
        <el-table-column prop="name" label="商品名称" width="180" />
        <el-table-column prop="shopNumber" label="商品数量" width="180">
          <template #default="{row}">
            <el-input v-model="row.shopNumber" type="number" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品价格" width="180" />
        <el-table-column prop="shopPrice" label="商品小计" width="180" />
        <el-table-column label="删除商品" width="180">
          <template #default="{row, $index}">
            <el-button size="mini" @click="handleDelete(row, $index)">删除商品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        总共购买了
        <span>{{ finalTotalShop }}</span>
        件商品；共计
        <span>{{ finalTotalPrice }}</span>
      </div>
    </el-row>
    <el-row>
      <el-table :data="notInCarList" style="margin-top:20px">
        <el-table-column prop="name" label="商品名称" width="180" />
        <el-table-column prop="price" label="商品价格" width="180" />
        <el-table-column label="添加商品" width="180">
          <template #default="{row, $index}">
            <el-button size="mini" @click="handleAdd(row, $index)">添加商品</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      finalTotalShop: 0,
      finalTotalPrice: 0,
      shopList: [
        {
          name: '鱼香肉丝',
          price: '25'
        },
        {
          name: '酸菜鱼',
          price: '40'
        },
        {
          name: '蚂蚁上树',
          price: '50'
        },
        {
          name: '佛跳墙',
          price: '75'
        },
        {
          name: '肉夹馍',
          price: '10'
        },
        {
          name: '羊肉泡沫',
          price: '30'
        },
        {
          name: '凉皮',
          price: '6'
        },
        {
          name: '冰峰',
          price: '2'
        }
      ],
      carList: [],
      notInCarList: []
    }
  },

  computed: {

  },
  watch: {
    carList: {
      handler(arr) {
        arr.map(r => {
          this.$set(r, 'shopPrice', r.shopNumber * r.price)
        })
        this.finalTotalShop = 0
        this.finalTotalPrice = 0
        arr.map(r => r.shopNumber).map(r => { this.finalTotalShop += Number(r) })
        arr.map(r => r.shopPrice).map(r => { this.finalTotalPrice += Number(r) })
      },
      deep: true
    }
  },
  created() {
    this.notInCarList = this.shopList
  },
  mounted() {},

  methods: {
    // 删除商品
    handleDelete(row, $index) {
      this.carList.splice($index, 1)
      this.notInCarList.push({ name: row.name, price: row.price })
    },
    // 添加商品
    handleAdd(row, $index) {
      this.carList.push({
        name: row.name,
        price: row.price,
        shopNumber: 0,
        shopPrice: 0
      })
      this.notInCarList.splice($index, 1)
    }
  }
}
</script>
<style lang="less" scoped></style>