当前位置：首页 > VUE

vue 实现全选全不选

2026-02-24 00:30:05VUE

实现全选全不选功能

在 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="item.checked"> {{ item.name }}
    </div>
  </div>
</template>

数据初始化

在 data 或 setup 中定义初始数据，包括子项列表和全选状态。

<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
    }
  }
}
</script>

全选逻辑

通过 toggleAll 方法控制所有子复选框的状态。当全选复选框状态变化时，遍历所有子项并更新其 checked 值。

methods: {
  toggleAll() {
    this.items.forEach(item => {
      item.checked = this.selectAll
    })
  }
}

子项选中状态同步

监听子复选框的变化，动态更新全选复选框的状态。使用计算属性或 watch 实现。

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

完整代码示例

以下是一个完整的 Vue 组件实现全选全不选功能的代码：

<template>
  <div>
    <input type="checkbox" v-model="selectAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.checked"> {{ 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 }
      ]
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.items.every(item => item.checked)
      },
      set(value) {
        this.items.forEach(item => {
          item.checked = value
        })
      }
    }
  }
}
</script>

使用 Vue 3 Composition API

如果使用 Vue 3 的 Composition API，可以通过 ref 和 computed 实现类似功能。

vue 实现全选全不选

<template>
  <div>
    <input type="checkbox" v-model="selectAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.checked"> {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const items = ref([
  { id: 1, name: '选项1', checked: false },
  { id: 2, name: '选项2', checked: false },
  { id: 3, name: '选项3', checked: false }
])

const selectAll = computed({
  get() {
    return items.value.every(item => item.checked)
  },
  set(value) {
    items.value.forEach(item => {
      item.checked = value
    })
  }
})
</script>