当前位置：首页 > VUE

vue实现多选

2026-01-07 23:12:49VUE

Vue 实现多选功能

在 Vue 中实现多选功能可以通过多种方式完成，以下是常见的几种方法：

使用 `v-model` 绑定数组

通过 v-model 绑定到一个数组，可以实现多选功能。适用于复选框组（checkbox）或多选下拉框（select multiple）。

<template>
  <div>
    <h3>选择你喜欢的编程语言</h3>
    <div v-for="language in languages" :key="language">
      <input 
        type="checkbox" 
        :id="language" 
        :value="language" 
        v-model="selectedLanguages"
      >
      <label :for="language">{{ language }}</label>
    </div>
    <p>已选择: {{ selectedLanguages }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      languages: ['JavaScript', 'Python', 'Java', 'C++', 'Go'],
      selectedLanguages: []
    }
  }
}
</script>

使用多选下拉框

通过 <select> 元素的 multiple 属性实现多选下拉框。

vue实现多选

<template>
  <div>
    <h3>选择你喜欢的框架</h3>
    <select v-model="selectedFrameworks" multiple>
      <option v-for="framework in frameworks" :key="framework" :value="framework">
        {{ framework }}
      </option>
    </select>
    <p>已选择: {{ selectedFrameworks }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      frameworks: ['Vue', 'React', 'Angular', 'Svelte'],
      selectedFrameworks: []
    }
  }
}
</script>

自定义多选组件

如果需要更复杂的功能，可以封装一个自定义多选组件。

<template>
  <div>
    <h3>自定义多选组件</h3>
    <div class="custom-multiselect">
      <div 
        v-for="item in items" 
        :key="item.id" 
        class="select-item"
        :class="{ 'selected': selectedItems.includes(item.id) }"
        @click="toggleSelection(item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <p>已选择: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelection(id) {
      const index = this.selectedItems.indexOf(id)
      if (index === -1) {
        this.selectedItems.push(id)
      } else {
        this.selectedItems.splice(index, 1)
      }
    }
  }
}
</script>

<style>
.custom-multiselect {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.select-item {
  padding: 8px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.select-item.selected {
  background-color: #42b983;
  color: white;
}
</style>

使用第三方库

如果需要更强大的多选功能（如搜索、分组等），可以使用第三方库如 vue-multiselect。

vue实现多选

安装：

npm install vue-multiselect

使用示例：

<template>
  <div>
    <h3>使用 vue-multiselect</h3>
    <multiselect
      v-model="selectedOptions"
      :options="options"
      :multiple="true"
      :close-on-select="false"
      placeholder="选择多个选项"
    ></multiselect>
    <p>已选择: {{ selectedOptions }}</p>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: { Multiselect },
  data() {
    return {
      options: ['选项1', '选项2', '选项3', '选项4'],
      selectedOptions: []
    }
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>