vue实现选择全选

Vue 实现全选功能

全选功能通常用于表格或多选框列表，通过一个主复选框控制所有子复选框的状态。以下是基于 Vue 2 和 Vue 3 的实现方法。

Vue 2 实现方式

模板部分

<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) : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll
    }
  }
}
</script>

Vue 3 实现方式

模板部分

<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>
import { ref, computed } from 'vue'

export default {
  setup() {
    const items = ref([
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ])
    const selectedItems = ref([])

    const selectAll = computed({
      get: () => selectedItems.value.length === items.value.length,
      set: (value) => {
        selectedItems.value = value ? items.value.map(item => item.id) : []
      }
    })

    const toggleAll = () => {
      selectAll.value = !selectAll.value
    }

    return {
      items,
      selectedItems,
      selectAll,
      toggleAll
    }
  }
}
</script>

实现原理

1. 使用 v-model 双向绑定主复选框和子复选框的状态
2. 通过计算属性 selectAll 判断是否全选
3. 当主复选框状态变化时，更新所有子复选框的状态
4. 子复选框状态变化时，自动更新主复选框状态

注意事项

1. 确保 items 数组中的每个对象都有唯一标识符（如 id）
2. 如果需要部分选中状态（indeterminate），可以添加额外的计算属性
3. 对于大型列表，考虑使用虚拟滚动优化性能