使用vue+elementui写一个简单的购物车

A：

首先需要在项目中安装vue和element-ui：

npm install vue element-ui --save-dev

接着，创建一个名为Cart.vue的组件，在模板中使用element-ui的组件实现购物车的基本功能：

<template>
  <div>
    <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="quantity" label="数量">
        <template slot-scope="{ row }">
          <el-input-number v-model="row.quantity" :min="1" @change="updateCart"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="subtotal" label="小计"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="danger" size="small" @click="removeFromCart(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p>总计：{{total}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart: [
        { name: "商品1", price: 10, quantity: 1 },
        { name: "商品2", price: 20, quantity: 1 },
        { name: "商品3", price: 30, quantity: 1 },
      ]
    };
  },
  computed: {
    total() {
      return this.cart.reduce((sum, item) => sum + item.subtotal, 0);
    }
  },
  methods: {
    updateCart() {
      this.cart.forEach(item => {
        item.subtotal = item.price * item.quantity;
      });
    },
    removeFromCart(item) {
      const index = this.cart.indexOf(item);
      if (index !== -1) {
        this.cart.splice(index, 1);
      }
    }
  }
};
</script>

在上面的代码中，我们展示了一个包含三个商品的购物车，并且可以通过元素ui的el-input-number组件调整每个商品的数量。我们还计算了每个商品的小计，并展示了购物车的总计。最后，我们还添加了一个删除按钮，可以从购物车中删除商品。

要在项目中使用这个组件，只需要在父组件中导入并注册：

<template>
  <div>
    <Cart></Cart>
  </div>
</template>

<script>
import Cart from "./Cart.vue";

export default {
  components: {
    Cart
  }
};
</script>

这样就实现了一个简单的购物车。