vue实现商品全选

实现全选功能的基本思路

在Vue中实现商品全选功能通常需要以下几个关键点：

• 使用v-model绑定复选框状态
• 计算属性判断是否全选
• 方法处理全选/取消全选操作

数据准备

data() {
  return {
    products: [
      { id: 1, name: '商品A', selected: false },
      { id: 2, name: '商品B', selected: false },
      { id: 3, name: '商品C', selected: false }
    ]
  }
}

全选状态计算

computed: {
  allSelected: {
    get() {
      return this.products.every(product => product.selected)
    },
    set(value) {
      this.products.forEach(product => {
        product.selected = value
      })
    }
  }
}

模板实现

<div>
  <label>
    <input type="checkbox" v-model="allSelected"> 全选
  </label>

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

方法实现（可选）

如果需要通过方法控制全选状态：

methods: {
  toggleAll(checked) {
    this.products.forEach(product => {
      product.selected = checked
    })
  }
}

响应式更新注意事项

当products数组发生变化时（如动态添加/删除商品），Vue会自动重新计算全选状态。如果遇到响应性问题，可以使用Vue.set或this.$set确保响应性。

性能优化建议

对于大量商品列表，可以考虑使用虚拟滚动技术避免DOM节点过多导致的性能问题。可以使用第三方库如vue-virtual-scroller实现。

样式增强

可以为选中的商品添加视觉反馈：

.product.selected {
  background-color: #f0f7ff;
}

<div v-for="product in products" 
     :key="product.id" 
     :class="{ selected: product.selected }">
  <!-- 商品内容 -->
</div>