当前位置：首页 > VUE

Vue多选框实现全选

2026-02-22 11:56:06VUE

Vue多选框实现全选的方法

数据绑定与状态管理

在Vue中实现多选框全选功能，需要维护一个数组存储选中项的状态。通过v-model绑定多选框组，同时使用计算属性或方法管理全选逻辑。

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
    <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) : []
      }
    }
  }
}
</script>

方法实现全选切换

也可以使用方法实现全选切换逻辑，适用于需要额外处理的情况：

Vue多选框实现全选

methods: {
  toggleAll() {
    if (this.selectedItems.length === this.items.length) {
      this.selectedItems = []
    } else {
      this.selectedItems = this.items.map(item => item.id)
    }
  }
}

注意事项

确保v-model绑定的selectedItems初始值为数组
当数据源items动态变化时，需要手动处理selectedItems的同步
对于大量数据建议使用<input type="checkbox" :checked="isSelected(item)" @change="toggleItem(item)">方式优化性能