当前位置：首页 > VUE

vue实现多选全选

2026-02-17 05:15:59VUE

Vue 实现多选与全选功能

在 Vue 中实现多选和全选功能，可以通过绑定 v-model 和计算属性来管理选中状态。以下是具体实现方式：

vue实现多选全选

基础多选实现

<template>
  <div>
    <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: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  }
}
</script>

全选功能实现

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="allSelected"
      @change="toggleAll"
    > Select All

    <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: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value 
          ? this.items.map(item => item.id) 
          : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.allSelected = !this.allSelected
    }
  }
}
</script>

动态更新全选状态

当手动选择部分项目时，全选复选框应显示为不确定状态：

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="allSelected"
      :indeterminate="isIndeterminate"
    > Select All

    <!-- 项目列表 -->
  </div>
</template>

<script>
export default {
  computed: {
    isIndeterminate() {
      return this.selectedItems.length > 0 
        && this.selectedItems.length < this.items.length
    }
  }
}
</script>

使用 Vuex 管理状态（可选）

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

// store.js
export default new Vuex.Store({
  state: {
    items: [...],
    selectedItems: []
  },
  mutations: {
    SET_SELECTED_ITEMS(state, payload) {
      state.selectedItems = payload
    }
  },
  getters: {
    allSelected: state => {
      return state.selectedItems.length === state.items.length
    }
  }
})

这些方法提供了从基础到高级的多选和全选实现方案，可根据具体需求选择适合的方式。

vue实现多选全选