vue实现全选框

实现全选框的基本逻辑

在Vue中实现全选框功能通常需要以下核心逻辑：通过一个v-model绑定全选状态，并监听其变化来同步子选框的状态；同时监听子选框的变化来更新全选框的状态（如部分选中或全选）。

模板结构示例

<template>
  <div>
    <!-- 全选框 -->
    <input 
      type="checkbox" 
      v-model="selectAll" 
      @change="toggleSelectAll"
    > 全选

    <!-- 子选框列表 -->
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="item.checked" 
        @change="updateSelectAll"
      > {{ item.name }}
    </div>
  </div>
</template>

数据与核心方法

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', checked: false },
        { id: 2, name: '选项2', checked: false },
        { id: 3, name: '选项3', checked: false }
      ],
      selectAll: false
    };
  },
  methods: {
    // 全选框变化时更新所有子选框
    toggleSelectAll() {
      this.items.forEach(item => {
        item.checked = this.selectAll;
      });
    },
    // 子选框变化时更新全选框状态
    updateSelectAll() {
      const allChecked = this.items.every(item => item.checked);
      const someChecked = this.items.some(item => item.checked);
      this.selectAll = allChecked ? true : someChecked ? null : false;
    }
  }
};
</script>

处理部分选中状态

若需全选框在部分选中时显示不确定状态（indeterminate），可通过HTML属性动态设置：

<input 
  type="checkbox" 
  v-model="selectAll" 
  @change="toggleSelectAll"
  :indeterminate="isIndeterminate"
>

在数据或计算属性中定义isIndeterminate：

computed: {
  isIndeterminate() {
    return this.items.some(item => item.checked) && !this.items.every(item => item.checked);
  }
}

使用计算属性优化

全选框状态可通过计算属性动态计算，避免手动维护selectAll变量：

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

响应式子选框数量变化

若子选框列表动态变化（如从API加载），需确保全选框状态及时更新：

watch: {
  items: {
    deep: true,
    handler() {
      this.updateSelectAll();
    }
  }
}