当前位置：首页 > VUE

vue 全选框实现

2026-02-19 08:08:13VUE

实现全选框的基本逻辑

在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" @change="updateSelectAll">
      {{ 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
    },
    updateSelectAll() {
      // 计算属性会自动更新
    }
  }
}
</script>

使用Vuex的状态管理方案（可选）

当需要跨组件共享选中状态时：

vue 全选框实现

// store.js
state: {
  items: [...],
  selectedItems: []
},
mutations: {
  TOGGLE_ALL(state, payload) {
    state.selectedItems = payload ? state.items.map(i => i.id) : []
  },
  UPDATE_SELECTION(state, payload) {
    state.selectedItems = payload
  }
}

性能优化建议

对于大型列表，考虑以下优化：

vue 全选框实现

使用v-virtual-scroll等虚拟滚动方案
避免在v-for中使用复杂计算
对子选框使用:key提高Diff效率

样式增强示例

添加CSS使交互更直观：

<style>
.checkbox-group {
  user-select: none;
}
.checkbox-item {
  margin-left: 20px;
  transition: background 0.2s;
}
.checkbox-item:hover {
  background: #f5f5f5;
}
</style>

完整组件示例

整合后的可复用组件：

<template>
  <div class="checkbox-group">
    <label class="select-all">
      <input type="checkbox" v-model="selectAll"> 全选
    </label>
    <div class="checkbox-item" v-for="item in items" :key="item.id">
      <label>
        <input 
          type="checkbox" 
          v-model="selectedItems" 
          :value="item.id"
          :disabled="item.disabled">
        {{ item.label || item.name }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
      validator: value => value.every(i => i.id !== undefined)
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    selectedItems: {
      get() { return this.value },
      set(val) { this.$emit('input', val) }
    },
    selectAll: {
      get() {
        const selectableItems = this.items.filter(i => !i.disabled)
        return selectableItems.length > 0 && 
          this.selectedItems.length === selectableItems.length
      },
      set(checked) {
        this.selectedItems = checked 
          ? this.items.filter(i => !i.disabled).map(i => i.id)
          : []
      }
    }
  }
}
</script>