vue实现物品全选代码

Vue实现物品全选功能

在Vue中实现物品全选功能通常需要结合复选框和数据绑定。以下是一个完整的实现示例，包含全选、反选以及单选逻辑。

基础实现代码

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
    </label>
    <ul>
      <li v-for="item in items" :key="item.id">
        <label>
          <input 
            type="checkbox" 
            v-model="selectedItems" 
            :value="item.id"
            @change="updateSelectAll"
          > {{ item.name }}
        </label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '物品1' },
        { id: 2, name: '物品2' },
        { id: 3, name: '物品3' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      if (this.selectAll) {
        this.selectedItems = this.items.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    },
    updateSelectAll() {
      this.selectAll = this.selectedItems.length === this.items.length
    }
  }
}
</script>

优化版本（包含反选功能）

<template>
  <div>
    <div>
      <button @click="selectAllItems">全选</button>
      <button @click="deselectAllItems">取消</button>
      <button @click="toggleSelection">反选</button>
    </div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <label>
          <input 
            type="checkbox" 
            v-model="selectedItems" 
            :value="item.id"
          > {{ item.name }}
        </label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '物品1' },
        { id: 2, name: '物品2' },
        { id: 3, name: '物品3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    selectAllItems() {
      this.selectedItems = this.items.map(item => item.id)
    },
    deselectAllItems() {
      this.selectedItems = []
    },
    toggleSelection() {
      const allIds = this.items.map(item => item.id)
      this.selectedItems = allIds.filter(id => 
        !this.selectedItems.includes(id)
      )
    }
  }
}
</script>

使用计算属性优化

computed: {
  selectAll: {
    get() {
      return this.selectedItems.length === this.items.length
    },
    set(value) {
      this.selectedItems = value ? this.items.map(item => item.id) : []
    }
  }
}

注意事项

1. 确保每个物品有唯一的标识符（如id）
2. 使用v-model绑定复选框数组时，value值需要与数组元素类型匹配
3. 全选状态可以通过计算属性或手动更新来保持同步
4. 对于大型列表，考虑性能优化，如使用虚拟滚动

以上代码可以根据实际需求进行调整，例如添加异步加载数据、分页支持等高级功能。