vue3+ts购物车demo

<template>
  <div>
    <h1>Shopping Cart</h1>
    
    <button @click="addItem">Add Item</button>
    <button @click="deleteSelectedItems">Delete Selected Items</button>
    <button @click="clearCart">Clear Cart</button>
    <button @click="selectAll">Select All</button>
    <button @click="toggleSelectAll">Toggle Select All</button>
    
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="selectAllStatus"></th>
          <th>Item</th>
          <th>Quantity</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cartItems" :key="item.id">
          <td><input type="checkbox" v-model="item.selected"></td>
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
          <td>
            <button @click="increaseQuantity(index)">+</button>
            <button @click="decreaseQuantity(index)">-</button>
            <button @click="deleteItem(index)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface CartItem {
  id: number;
  name: string;
  quantity: number;
  selected: boolean;
}

const cartItems = ref<CartItem[]>([
  { id: 1, name: 'Item 1', quantity: 1, selected: false },
  { id: 2, name: 'Item 2', quantity: 2, selected: false },
  { id: 3, name: 'Item 3', quantity: 3, selected: false },
]);

const selectAllStatus = ref(false);

const addItem = () => {
  const newItem = {
    id: cartItems.value.length + 1,
    name: `Item ${cartItems.value.length + 1}`,
    quantity: 1,
    selected: false,
  };
  cartItems.value.push(newItem);
}

const deleteItem = (index: number) => {
  cartItems.value.splice(index, 1);
}

const deleteSelectedItems = () => {
  cartItems.value = cartItems.value.filter(item => !item.selected);
}

const clearCart = () => {
  cartItems.value = [];
}

const selectAll = () => {
  cartItems.value.forEach(item => item.selected = true);
}

const toggleSelectAll = () => {
  selectAllStatus.value = !selectAllStatus.value;
  cartItems.value.forEach(item => item.selected = selectAllStatus.value);
}

const increaseQuantity = (index: number) => {
  cartItems.value[index].quantity++;
}

const decreaseQuantity = (index: number) => {
  if (cartItems.value[index].quantity > 1) {
    cartItems.value[index].quantity--;
  }
}
</script>