elementUI -->实现简单的购物车

好的，我可以帮你实现一个简单的购物车页面。首先需要引入 ElementUI 库，然后创建一个购物车组件，里面包含商品列表和购物车列表。具体代码如下：

<template>
  <div>
    <h2>商品列表</h2>
    <el-row>
      <el-col v-for="item in goods" :key="item.id" :span="6">
        <el-card :body-style="{ padding: '10px' }">
          <img :src="item.img" style="width: 100%">
          <div style="height: 60px">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right">{{ item.price }}元</span>
          </div>
          <el-button type="primary" @click="addCart(item)">加入购物车</el-button>
        </el-card>
      </el-col>
    </el-row>

    <h2>购物车列表</h2>
    <el-table :data="cart" style="width: 100%">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="count" label="数量"></el-table-column>
      <el-table-column prop="total" label="总价"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        { id: 1, name: '商品1', price: 10, img: 'https://picsum.photos/id/1/200/200' },
        { id: 2, name: '商品2', price: 20, img: 'https://picsum.photos/id/2/200/200' },
        { id: 3, name: '商品3', price: 30, img: 'https://picsum.photos/id/3/200/200' },
        { id: 4, name: '商品4', price: 40, img: 'https://picsum.photos/id/4/200/200' },
      ],
      cart: [],
    };
  },

  methods: {
    addCart(item) {
      const index = this.cart.findIndex((cartItem) => cartItem.id === item.id);
      if (index === -1) {
        this.cart.push({ ...item, count: 1, total: item.price });
      } else {
        this.cart[index].count += 1;
        this.cart[index].total += item.price;
      }
    },
  },
};
</script>

这段代码创建了一个包含商品列表和购物车列表的页面，商品列表中包含4个商品，每个商品有名称、价格和图片，以及一个“加入购物车”按钮。购物车列表展示已添加的商品，包括名称、单价、数量和总价。

当点击“加入购物车”按钮时，会将商品添加到购物车列表中。如果购物车中已经存在该商品，则数量加1并更新总价；否则将该商品添加到购物车列表中，并将数量设置为1，总价为单价。

这是一个简单的购物车实现，你可以根据自己的需求进行修改和完善。