vue实现多选

Vue 实现多选的几种方法

使用 v-model 绑定数组

在 Vue 中，可以利用 v-model 绑定一个数组来实现多选功能。适用于复选框组（checkbox group）。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :value="option.value" 
        v-model="selectedOptions"
      />
      {{ option.label }}
    </label>
    <p>已选：{{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橘子' }
      ],
      selectedOptions: []
    };
  }
};
</script>

使用第三方组件库

若需要更丰富的交互（如搜索、全选等），可以集成第三方组件库：

• Element UI：el-checkbox-group
• Vuetify：v-checkbox
• Ant Design Vue：a-checkbox-group

以 Element UI 为例：

<template>
  <el-checkbox-group v-model="selectedOptions">
    <el-checkbox 
      v-for="option in options" 
      :key="option.value" 
      :label="option.value"
    >
      {{ option.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

自定义多选逻辑

通过事件手动管理选中状态，适合复杂场景（如表格多选）：

<template>
  <div>
    <div 
      v-for="item in list" 
      :key="item.id" 
      @click="toggleSelect(item)"
      :class="{ 'selected': selectedItems.includes(item.id) }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleSelect(item) {
      const index = this.selectedItems.indexOf(item.id);
      if (index === -1) {
        this.selectedItems.push(item.id);
      } else {
        this.selectedItems.splice(index, 1);
      }
    }
  }
};
</script>

结合 Vuex 管理状态

当多选数据需要跨组件共享时，可使用 Vuex：

// store.js
const store = new Vuex.Store({
  state: {
    selectedItems: []
  },
  mutations: {
    TOGGLE_ITEM(state, itemId) {
      const index = state.selectedItems.indexOf(itemId);
      if (index === -1) {
        state.selectedItems.push(itemId);
      } else {
        state.selectedItems.splice(index, 1);
      }
    }
  }
});

组件中通过 mapMutations 调用：

<template>
  <div @click="$store.commit('TOGGLE_ITEM', item.id)">
    {{ item.name }}
  </div>
</template>

注意事项

• 性能优化：对于大量数据（如 1000+ 项），建议使用虚拟滚动（如 vue-virtual-scroller）。
• 无障碍：为复选框添加正确的 aria-* 属性。
• 移动端适配：考虑触摸交互，可增加选中反馈效果。