当前位置：首页 > VUE

vue多选实现

2026-03-27 17:33:34VUE

Vue 多选实现方法

使用 `v-model` 绑定数组

在 Vue 中，可以通过 v-model 绑定一个数组来实现多选功能。当用户勾选多个选项时，选中的值会自动添加到数组中。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedItems: []
    };
  }
};
</script>

使用第三方组件库

如果需要更丰富的多选功能（如搜索、分组等），可以使用第三方组件库，例如 Element UI 或 Vuetify。

vue多选实现

Element UI 示例：

vue多选实现

<template>
  <el-select v-model="selectedItems" multiple placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedItems: []
    };
  }
};
</script>

自定义多选组件

如果需要完全自定义的多选逻辑，可以封装一个组件，通过事件和 props 实现数据绑定。

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

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

表单提交处理

多选数据通常需要作为数组提交到后端。可以通过以下方式处理表单提交：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedItems" 
        :value="option.value"
      />
      {{ option.label }}
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedItems: []
    };
  },
  methods: {
    handleSubmit() {
      console.log('Submitted items:', this.selectedItems);
      // 调用 API 提交数据
    }
  }
};
</script>