当前位置：首页 > VUE

vue前端实现多选

2026-02-18 12:45:45VUE

Vue 前端实现多选的方法

使用 `v-model` 绑定数组

在 Vue 中，可以通过 v-model 绑定一个数组来实现多选功能。适用于复选框组或多选下拉框。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

使用 `select` 多选下拉框

通过 HTML 的 <select multiple> 结合 v-model 实现多选下拉功能。

<template>
  <div>
    <select v-model="selectedOptions" multiple>
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

使用第三方组件库

如果需要更丰富的功能（如搜索、分组等），可以集成第三方组件库：

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

以 Element UI 为例：

<template>
  <div>
    <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>
  </div>
</template>

自定义多选组件

如果需要完全自定义样式或逻辑，可以封装一个多选组件：

vue前端实现多选

通过 v-for 渲染选项。
使用 v-model 或 @change 事件管理选中状态。
通过 CSS 控制选中样式（如高亮背景）。

<template>
  <div class="custom-multi-select">
    <div 
      v-for="option in options" 
      :key="option.value" 
      class="option"
      :class="{ 'selected': selectedOptions.includes(option.value) }"
      @click="toggleOption(option.value)"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    value: Array
  },
  data() {
    return {
      selectedOptions: this.value || []
    };
  },
  methods: {
    toggleOption(value) {
      const index = this.selectedOptions.indexOf(value);
      if (index === -1) {
        this.selectedOptions.push(value);
      } else {
        this.selectedOptions.splice(index, 1);
      }
      this.$emit('input', this.selectedOptions);
    }
  }
};
</script>