vue实现checkbox全选

Vue 实现 Checkbox 全选功能

基本实现思路

在 Vue 中实现全选功能通常需要以下步骤：

1. 使用 v-model 绑定全选复选框的状态
2. 使用 v-model 绑定子复选框的状态数组
3. 监听全选状态变化，更新子复选框
4. 监听子复选框变化，更新全选状态

代码实现示例

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectAll" @change="toggleAll">
      全选
    </label>

    <div v-for="item in items" :key="item.id">
      <label>
        <input type="checkbox" v-model="selectedItems" :value="item.id" @change="updateSelectAll">
        {{ item.name }}
      </label>
    </div>
  </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() {
      this.selectedItems = this.selectAll 
        ? this.items.map(item => item.id) 
        : []
    },
    updateSelectAll() {
      this.selectAll = this.selectedItems.length === this.items.length
    }
  }
}
</script>

使用计算属性优化

可以通过计算属性来简化代码，使逻辑更清晰：

<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>

注意事项

• 确保 v-model 绑定的数据类型一致（数组或布尔值）
• 处理异步数据时，需要在数据加载完成后初始化选中状态
• 对于大量数据，考虑性能优化，避免频繁计算

这种方法适用于大多数 Vue 项目，包括 Vue 2 和 Vue 3。根据项目需求，可以进一步封装成可复用组件。