当前位置：首页 > VUE

vue前端实现多选

2026-03-10 02:02:45VUE

Vue 前端实现多选的方法

使用 v-model 绑定数组

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

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
      >
      {{ 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>

使用第三方组件库

对于更复杂的需求（如表格多选、下拉多选等），可以使用第三方 UI 库：

Element UI：el-checkbox-group 或 el-select 多选模式
Ant Design Vue：a-checkbox-group 或 a-select 多选模式

以 Element UI 为例：

<template>
  <el-checkbox-group v-model="checkedList">
    <el-checkbox v-for="item in options" :key="item" :label="item" />
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      checkedList: []
    };
  }
};
</script>

自定义多选逻辑

对于需要完全自定义的场景，可以通过事件监听手动管理选中状态：

vue前端实现多选

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="toggleSelection(item.id)"
      :class="{ 'active': selectedIds.includes(item.id) }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目A' },
        { id: 2, name: '项目B' }
      ],
      selectedIds: []
    };
  },
  methods: {
    toggleSelection(id) {
      const index = this.selectedIds.indexOf(id);
      if (index > -1) {
        this.selectedIds.splice(index, 1);
      } else {
        this.selectedIds.push(id);
      }
    }
  }
};
</script>

注意事项

性能优化：当选项数量较大时（如超过 1000 条），建议使用虚拟滚动技术。
数据同步：如果多选数据需要提交到后端，确保将数组格式转换为接口要求的格式（如逗号分隔字符串）。

全选功能：可以通过计算属性实现全选/反选逻辑：

computed: {
allSelected: {
 get() {
   return this.selectedOptions.length === this.options.length;
 },
 set(value) {
   this.selectedOptions = value ? this.options.map(opt => opt.value) : [];
 }
}
}