vue 实现全选全不选

Vue 实现全选全不选

在 Vue 中实现全选和全不选功能可以通过绑定复选框的状态到数据模型，并利用计算属性或方法动态更新选中状态。以下是具体实现方式：

数据绑定与模板结构

假设需要操作一组复选框，数据存储在 items 数组中，每个对象包含 id 和 selected 属性：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', selected: false },
      { id: 2, name: 'Item 2', selected: false },
      { id: 3, name: 'Item 3', selected: false }
    ],
    selectAll: false // 全选按钮状态
  }
}

模板中使用 v-model 绑定单个复选框和全选按钮：

<div>
  <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
</div>
<div v-for="item in items" :key="item.id">
  <input type="checkbox" v-model="item.selected"> {{ item.name }}
</div>

方法实现

通过 toggleSelectAll 方法控制全选或全不选：

methods: {
  toggleSelectAll() {
    this.items.forEach(item => {
      item.selected = this.selectAll;
    });
  }
}

计算属性优化

若需根据子选项状态动态更新全选按钮，可添加计算属性：

computed: {
  selectAll: {
    get() {
      return this.items.every(item => item.selected);
    },
    set(value) {
      this.items.forEach(item => {
        item.selected = value;
      });
    }
  }
}

此时模板中的 @change 事件可省略，直接通过 v-model 双向绑定：

<input type="checkbox" v-model="selectAll"> 全选

完整示例

结合计算属性的完整实现如下：

<template>
  <div>
    <input type="checkbox" v-model="selectAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.selected"> {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ]
    };
  },
  computed: {
    selectAll: {
      get() {
        return this.items.every(item => item.selected);
      },
      set(value) {
        this.items.forEach(item => {
          item.selected = value;
        });
      }
    }
  }
};
</script>

通过以上方式，可以灵活实现全选/全不选功能，同时保持子选项与全选按钮的状态同步。