在vue中,对表格购物车中商品的数量添加+,-按钮,进行数量的删减,同时小计的价钱也会发生变化。添加操作列,里面每一个格子里面都有一个删除按钮,点一下可以删除那一行的所有数据和格子
时间: 2024-04-09 14:29:50 浏览: 17
你可以在 Vue.js 中实现对购物车中商品数量的增减,并根据数量变化更新小计价格。同时,你也可以为表格添加一个操作列,每个单元格都包含一个删除按钮,点击按钮可以删除该行的数据和单元格。以下是一个示例:
```html
<template>
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in cart" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button @click="decrementQuantity(item)">-</button>
{{ item.quantity }}
<button @click="incrementQuantity(item)">+</button>
</td>
<td>{{ calculateSubtotal(item) }}</td>
<td>
<button @click="deleteItem(index)">Delete</button>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
cart: [
{ name: 'Product 1', price: 10, quantity: 1 },
{ name: 'Product 2', price: 20, quantity: 2 },
// Add more items as needed
]
};
},
methods: {
incrementQuantity(item) {
item.quantity++;
},
decrementQuantity(item) {
if (item.quantity > 1) {
item.quantity--;
}
},
calculateSubtotal(item) {
return item.price * item.quantity;
},
deleteItem(index) {
this.cart.splice(index, 1);
}
}
};
</script>
```
在上面的示例中,我们在表格中添加了一个操作列,其中每个单元格包含一个删除按钮。点击按钮时,我们调用 `deleteItem` 方法来删除对应行的数据和单元格。
请注意,这只是一个简单的示例,你可以根据你的需求进行扩展和修改。同时,你也可以添加其他功能,如总计价格等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)