当前位置：首页 > VUE

vue实现全选不全选

2026-02-22 01:12:22VUE

vue实现全选/不全选功能

在Vue中实现全选/不全选功能通常需要结合复选框（checkbox）和数据绑定。以下是几种常见的实现方式：

基础实现方法

使用v-model绑定一个全选状态变量，并通过计算属性或方法控制子选项的状态：

<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: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  }
}
</script>

表格中的全选实现

在表格场景中，可以使用类似的方法：

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll"></th>
        <th>名称</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

使用Vuex管理状态

对于大型应用，可以使用Vuex集中管理选中状态：

// store.js
export default new Vuex.Store({
  state: {
    items: [...],
    selectedItems: []
  },
  mutations: {
    toggleSelectAll(state, payload) {
      state.selectedItems = payload ? state.items.map(item => item.id) : []
    },
    toggleItemSelection(state, itemId) {
      const index = state.selectedItems.indexOf(itemId)
      if (index === -1) {
        state.selectedItems.push(itemId)
      } else {
        state.selectedItems.splice(index, 1)
      }
    }
  },
  getters: {
    isSelectAll: state => {
      return state.selectedItems.length === state.items.length
    }
  }
})

性能优化版本

对于大量数据的情况，可以使用Set来提高性能：

vue实现全选不全选

data() {
  return {
    selectedItems: new Set()
  }
},
methods: {
  toggleSelectAll() {
    if (this.selectedItems.size === this.items.length) {
      this.selectedItems.clear()
    } else {
      this.items.forEach(item => this.selectedItems.add(item.id))
    }
  },
  toggleItem(id) {
    if (this.selectedItems.has(id)) {
      this.selectedItems.delete(id)
    } else {
      this.selectedItems.add(id)
    }
  }
}