当前位置：首页 > VUE

vue实现商品全选

2026-03-08 14:04:21VUE

实现商品全选功能

在Vue中实现商品全选功能通常涉及以下几个关键步骤：

数据绑定与状态管理

创建商品列表数据，每个商品对象包含选中状态属性：

data() {
  return {
    products: [
      { id: 1, name: '商品A', price: 100, selected: false },
      { id: 2, name: '商品B', price: 200, selected: false },
      // 更多商品...
    ],
    selectAll: false
  }
}

全选逻辑实现

添加全选/取消全选的方法：

vue实现商品全选

methods: {
  toggleSelectAll() {
    this.products.forEach(item => {
      item.selected = this.selectAll
    })
  }
}

单项选择监控

监听单个商品选择状态变化，自动更新全选状态：

watch: {
  products: {
    deep: true,
    handler(newVal) {
      this.selectAll = newVal.every(item => item.selected)
    }
  }
}

模板部分实现

在模板中添加全选复选框和商品列表：

vue实现商品全选

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
      全选
    </label>

    <div v-for="product in products" :key="product.id">
      <label>
        <input type="checkbox" v-model="product.selected">
        {{ product.name }} - ¥{{ product.price }}
      </label>
    </div>
  </div>
</template>

计算选中商品

添加计算属性获取已选中的商品：

computed: {
  selectedProducts() {
    return this.products.filter(item => item.selected)
  },
  totalPrice() {
    return this.selectedProducts.reduce((sum, item) => sum + item.price, 0)
  }
}

样式优化

为选中状态添加视觉反馈：

.selected {
  background-color: #f0f8ff;
}

完整组件示例

将上述代码组合成完整组件：

<template>
  <div class="product-selector">
    <div class="select-all">
      <label>
        <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
        全选
      </label>
      <span>已选 {{ selectedProducts.length }} 件商品，总价: ¥{{ totalPrice }}</span>
    </div>

    <div 
      v-for="product in products" 
      :key="product.id" 
      :class="{ selected: product.selected }"
      class="product-item"
    >
      <label>
        <input type="checkbox" v-model="product.selected">
        {{ product.name }} - ¥{{ product.price }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, selected: false },
        { id: 2, name: '商品B', price: 200, selected: false },
        { id: 3, name: '商品C', price: 150, selected: false }
      ],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      this.products.forEach(item => {
        item.selected = this.selectAll
      })
    }
  },
  watch: {
    products: {
      deep: true,
      handler(newVal) {
        this.selectAll = newVal.every(item => item.selected)
      }
    }
  },
  computed: {
    selectedProducts() {
      return this.products.filter(item => item.selected)
    },
    totalPrice() {
      return this.selectedProducts.reduce((sum, item) => sum + item.price, 0)
    }
  }
}
</script>

<style>
.product-selector {
  max-width: 500px;
  margin: 0 auto;
}
.select-all {
  padding: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.product-item {
  padding: 8px 10px;
  border: 1px solid #eee;
  margin-bottom: 5px;
}
.product-item.selected {
  background-color: #f0f8ff;
}
</style>