当前位置：首页 > VUE

vue实现multiselect效果

2026-01-19 04:52:21VUE

Vue 实现多选（Multiselect）效果

使用第三方库 `vue-multiselect`

安装 vue-multiselect 库：

npm install vue-multiselect

在 Vue 组件中引入并使用：

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :close-on-select="false"
      placeholder="选择多个选项"
      label="name"
      track-by="name"
    ></multiselect>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

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

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

自定义实现多选功能

如果不希望使用第三方库，可以通过原生 Vue 实现多选功能：

<template>
  <div>
    <div class="multiselect">
      <div class="selected-options">
        <span v-for="(option, index) in selected" :key="index" class="selected-tag">
          {{ option }}
          <button @click="removeOption(index)">×</button>
        </span>
      </div>
      <input
        type="text"
        v-model="searchQuery"
        @keydown.enter="addOption"
        placeholder="输入并回车添加选项"
      />
      <ul v-if="filteredOptions.length > 0" class="options-list">
        <li
          v-for="(option, index) in filteredOptions"
          :key="index"
          @click="selectOption(option)"
        >
          {{ option }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      options: ['选项1', '选项2', '选项3', '选项4'],
      searchQuery: ''
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(
        option =>
          option.toLowerCase().includes(this.searchQuery.toLowerCase()) &&
          !this.selected.includes(option)
      )
    }
  },
  methods: {
    addOption() {
      if (
        this.searchQuery.trim() &&
        !this.selected.includes(this.searchQuery.trim()) &&
        this.options.includes(this.searchQuery.trim())
      ) {
        this.selected.push(this.searchQuery.trim())
        this.searchQuery = ''
      }
    },
    selectOption(option) {
      if (!this.selected.includes(option)) {
        this.selected.push(option)
        this.searchQuery = ''
      }
    },
    removeOption(index) {
      this.selected.splice(index, 1)
    }
  }
}
</script>

<style>
.multiselect {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 4px;
}
.selected-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}
.selected-tag {
  background: #eee;
  padding: 2px 5px;
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.options-list {
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
  border: 1px solid #eee;
  max-height: 150px;
  overflow-y: auto;
}
.options-list li {
  padding: 5px 10px;
  cursor: pointer;
}
.options-list li:hover {
  background: #f5f5f5;
}
</style>

使用 Element UI 的多选组件

如果项目中使用 Element UI，可以直接使用其多选组件：

vue实现multiselect效果

<template>
  <div>
    <el-select v-model="selected" multiple placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

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