当前位置：首页 > VUE

使用vue实现全选

2026-02-18 05:23:24VUE

使用 Vue 实现全选功能

在 Vue 中实现全选功能可以通过 v-model 绑定复选框的状态，并结合计算属性或方法动态更新子选项的状态。

基础实现

定义数据 在 Vue 的 data 中定义选项列表和全选状态：

data() {
  return {
    items: [
      { id: 1, name: '选项1', checked: false },
      { id: 2, name: '选项2', checked: false },
      { id: 3, name: '选项3', checked: false }
    ],
    selectAll: false
  }
}

全选逻辑 使用计算属性或方法实现全选与反选：

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

模板绑定 在模板中绑定全选复选框和子选项：

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

动态数据场景

若数据动态加载，需监听数据变化并同步全选状态：

watch: {
  items: {
    handler(newItems) {
      this.selectAll = newItems.every(item => item.checked)
    },
    deep: true
  }
}

方法替代计算属性

若不使用计算属性，可通过方法实现：

methods: {
  toggleSelectAll() {
    this.items.forEach(item => {
      item.checked = this.selectAll
    })
  },
  checkSelectAll() {
    this.selectAll = this.items.every(item => item.checked)
  }
}

模板中调用方法：

使用vue实现全选

<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="checkSelectAll" />
</div>