当前位置：首页 > VUE

vue实现选择全选

2026-02-11 04:00:39VUE

Vue 实现全选功能

在 Vue 中实现全选功能通常需要结合复选框和数据绑定。以下是一个完整的实现方案：

模板部分

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
    <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: [],
      selectAll: false
    }
  },
  watch: {
    selectedItems(newVal) {
      this.selectAll = newVal.length === this.items.length
    }
  },
  methods: {
    toggleSelectAll() {
      this.selectedItems = this.selectAll 
        ? this.items.map(item => item.id) 
        : []
    }
  }
}
</script>

实现原理

数据绑定：使用 v-model 双向绑定复选框状态和数组数据
全选逻辑：当点击全选复选框时，根据其状态决定是将所有选项ID加入数组还是清空数组
自动检测：通过 watch 监听 selectedItems 的变化，当选中项数量等于总项数时自动勾选全选框

进阶实现

对于更复杂的场景，可以结合计算属性：

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

这样可以直接用计算属性替代原来的 data 属性和 watch，使代码更简洁。