vue实现全选全不选

Vue 实现全选/全不选功能

在 Vue 中实现全选/全不选功能，通常需要处理以下逻辑：绑定复选框的 v-model、监听全选状态变化、更新子选项状态。以下是具体实现方式：

基础实现（选项列表为数组）

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll
    }
  }
}
</script>

对象形式存储选项状态

如果选项状态以对象形式存储（如 { id: boolean }），实现方式如下：

<template>
  <div>
    <label>
      <input type="checkbox" v-model="allSelected" @change="handleSelectAll"> 全选/全不选
    </label>
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selected[item.id]">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selected: {}
    }
  },
  computed: {
    allSelected: {
      get() {
        return Object.values(this.selected).every(Boolean)
      },
      set(value) {
        this.items.forEach(item => {
          this.$set(this.selected, item.id, value)
        })
      }
    }
  },
  methods: {
    handleSelectAll() {
      this.allSelected = !this.allSelected
    }
  }
}
</script>

注意事项

1. 使用 $set 确保对象属性的响应式更新（Vue 2.x 需要）
2. 计算属性的 setter 用于同步全选状态与子选项
3. 若选项动态变化，需在 watch 中初始化 selected 对象
4. 表单提交时，可通过 Object.keys(this.selected).filter(id => this.selected[id]) 获取已选 ID 列表