当前位置：首页 > VUE

vue实现多选全选

2026-03-08 17:28:55VUE

Vue实现多选和全选功能

在Vue中实现多选和全选功能通常需要结合v-model和计算属性。以下是具体实现方法：

基础多选实现

使用v-model绑定数组类型的数据到复选框组：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  }
}
</script>

添加全选功能

通过计算属性实现全选逻辑：

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        id="selectAll" 
        v-model="allSelected"
        @change="toggleSelectAll"
      >
      <label for="selectAll">全选</label>
    </div>

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  },
  methods: {
    toggleSelectAll() {
      this.allSelected = !this.allSelected
    }
  }
}
</script>

使用Vuex管理状态（可选）

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

vue实现多选全选

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    selectedItems: []
  },
  mutations: {
    setSelectedItems(state, items) {
      state.selectedItems = items
    },
    toggleSelectAll(state) {
      if (state.selectedItems.length === state.items.length) {
        state.selectedItems = []
      } else {
        state.selectedItems = state.items.map(item => item.id)
      }
    }
  }
})

组件中使用Vuex

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="allSelected"
      @change="toggleSelectAll"
    >
    <label>全选</label>

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

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['items', 'selectedItems']),
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.setSelectedItems(value ? this.items.map(item => item.id) : [])
      }
    }
  },
  methods: {
    ...mapMutations(['setSelectedItems', 'toggleSelectAll'])
  }
}
</script>