当前位置：首页 > VUE

vue实现多选全选

2026-01-18 11:41:34VUE

Vue 实现多选全选功能

数据准备

在 Vue 中实现多选全选功能，需要准备两个关键数据：items（待选项列表）和selectedItems（已选项列表）。items通常从后端 API 获取或前端静态定义，selectedItems初始化为空数组。

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

全选逻辑

全选功能通过计算属性allSelected实现，它检查selectedItems是否包含所有items。toggleSelectAll方法根据当前全选状态切换所有选项。

vue实现多选全选

computed: {
  allSelected() {
    return this.selectedItems.length === this.items.length
  }
},
methods: {
  toggleSelectAll() {
    if (this.allSelected) {
      this.selectedItems = []
    } else {
      this.selectedItems = [...this.items]
    }
  }
}

单个选项选择

单个选项通过toggleSelect方法切换选择状态，使用findIndex检查选项是否已存在。

methods: {
  toggleSelect(item) {
    const index = this.selectedItems.findIndex(i => i.id === item.id)
    if (index >= 0) {
      this.selectedItems.splice(index, 1)
    } else {
      this.selectedItems.push(item)
    }
  }
}

模板绑定

模板中使用v-for渲染选项列表，v-model绑定复选框状态。全选复选框绑定allSelected计算属性。

vue实现多选全选

<div>
  <input type="checkbox" :checked="allSelected" @change="toggleSelectAll">
  <label>全选</label>
</div>
<div v-for="item in items" :key="item.id">
  <input 
    type="checkbox" 
    :checked="selectedItems.some(i => i.id === item.id)"
    @change="toggleSelect(item)"
  >
  <label>{{ item.name }}</label>
</div>

使用 Vuex 管理状态（可选）

对于大型应用，可使用 Vuex 集中管理选择状态。定义state、mutations和getters处理选择逻辑。

// store.js
const store = new Vuex.Store({
  state: {
    items: [...],
    selectedItems: []
  },
  mutations: {
    toggleSelectAll(state) {
      state.selectedItems = state.selectedItems.length === state.items.length 
        ? [] 
        : [...state.items]
    },
    toggleSelect(state, item) {
      const index = state.selectedItems.findIndex(i => i.id === item.id)
      if (index >= 0) {
        state.selectedItems.splice(index, 1)
      } else {
        state.selectedItems.push(item)
      }
    }
  },
  getters: {
    allSelected: state => state.selectedItems.length === state.items.length
  }
})

性能优化

对于大型列表，使用Object或Set存储选中状态比数组更高效。例如用selectedIds对象存储选中 ID。

data() {
  return {
    selectedIds: {}
  }
},
methods: {
  toggleSelect(item) {
    this.$set(this.selectedIds, item.id, !this.selectedIds[item.id])
  }
}