vue实现商品全选

实现全选功能的基本思路

在Vue中实现商品全选功能，通常需要维护一个商品列表数据和一个选中状态数组。通过计算属性判断是否全选，通过方法控制全选或取消全选。

定义数据模型

data() {
  return {
    goodsList: [
      { id: 1, name: '商品1', price: 100 },
      { id: 2, name: '商品2', price: 200 },
      { id: 3, name: '商品3', price: 300 }
    ],
    selectedIds: [] // 存储选中商品的id
  }
}

计算全选状态

computed: {
  isAllSelected() {
    return this.selectedIds.length === this.goodsList.length
  }
}

全选/取消全选方法

methods: {
  toggleAllSelection() {
    if (this.isAllSelected) {
      this.selectedIds = []
    } else {
      this.selectedIds = this.goodsList.map(item => item.id)
    }
  }
}

单个商品选择方法

methods: {
  toggleItemSelection(id) {
    const index = this.selectedIds.indexOf(id)
    if (index === -1) {
      this.selectedIds.push(id)
    } else {
      this.selectedIds.splice(index, 1)
    }
  }
}

模板实现

<template>
  <div>
    <label>
      <input 
        type="checkbox" 
        :checked="isAllSelected" 
        @change="toggleAllSelection"
      />
      全选
    </label>

    <div v-for="item in goodsList" :key="item.id">
      <label>
        <input 
          type="checkbox" 
          :checked="selectedIds.includes(item.id)" 
          @change="toggleItemSelection(item.id)"
        />
        {{ item.name }} - ￥{{ item.price }}
      </label>
    </div>
  </div>
</template>

使用Vuex管理状态（可选）

对于大型应用，可以使用Vuex管理选中状态：

// store.js
export default new Vuex.Store({
  state: {
    goodsList: [...],
    selectedIds: []
  },
  getters: {
    isAllSelected: state => {
      return state.selectedIds.length === state.goodsList.length
    }
  },
  mutations: {
    TOGGLE_ALL(state) {
      if (state.selectedIds.length === state.goodsList.length) {
        state.selectedIds = []
      } else {
        state.selectedIds = state.goodsList.map(item => item.id)
      }
    },
    TOGGLE_ITEM(state, id) {
      const index = state.selectedIds.indexOf(id)
      if (index === -1) {
        state.selectedIds.push(id)
      } else {
        state.selectedIds.splice(index, 1)
      }
    }
  }
})

性能优化建议

对于大量商品列表，使用对象存储选中状态比数组更高效：

data() {
  return {
    selectedMap: {} // {商品id: true/false}
  }
}

计算全选状态改为：

isAllSelected() {
  return Object.keys(this.selectedMap).length === this.goodsList.length
}