当前位置：首页 > VUE

vue 2.0 实现select 2

2026-02-22 02:51:22VUE

Vue 2.0 实现 Select2 组件

在 Vue 2.0 中实现类似 Select2 的功能，可以通过原生开发或集成第三方库完成。以下是两种常见方法：

使用原生 Vue 实现基础功能

创建一个自定义组件，模拟 Select2 的核心功能（搜索、多选等）：

<template>
  <div class="custom-select">
    <div class="selected-options" @click="toggleDropdown">
      <span v-for="option in selectedOptions" :key="option.value">
        {{ option.label }}
      </span>
      <input
        v-model="searchQuery"
        v-if="isSearchable"
        @focus="openDropdown"
        placeholder="Search..."
      />
    </div>
    <ul v-show="isOpen" class="dropdown-list">
      <li
        v-for="option in filteredOptions"
        :key="option.value"
        @click="selectOption(option)"
      >
        {{ option.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    isSearchable: Boolean,
    multiple: Boolean
  },
  data() {
    return {
      isOpen: false,
      searchQuery: '',
      selectedOptions: []
    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option =>
        option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    openDropdown() {
      this.isOpen = true;
    },
    selectOption(option) {
      if (this.multiple) {
        this.selectedOptions.push(option);
      } else {
        this.selectedOptions = [option];
        this.isOpen = false;
      }
    }
  }
};
</script>

<style>
.custom-select {
  position: relative;
  width: 200px;
}
.dropdown-list {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
}
</style>

集成官方 Select2 库

通过 Vue 封装 Select2 的 jQuery 插件：

安装依赖
```
npm install select2 jquery
```

创建封装组件


<template>
<select class="form-control">
 <option v-for="option in options" :value="option.value" :key="option.value">
   {{ option.label }}
 </option>
</select>
</template>

import $ from 'jquery'; import 'select2';

export default { name: 'VueSelect2', props: { options: { type: Array, required: true }, value: [String, Array], placeholder: String, multiple: Boolean }, mounted() { const vm = this; $(this.$el) .select2({ placeholder: this.placeholder, multiple: this.multiple, data: this.options }) .val(this.value) .trigger('change') .on('change', function() { vm.$emit('input', $(this).val()); }); }, watch: { value(val) { $(this.$el).val(val).trigger('change'); }, options(options) { $(this.$el).empty().select2({ data: options }); } }, destroyed() { $(this.$el).off().select2('destroy'); } };

```

使用 vue-select 第三方组件

安装 vue-select
```
npm install vue-select
```

基础使用示例


<template>
<v-select
 :options="['Apple', 'Banana', 'Orange']"
 :reduce="fruit => fruit"
 label="fruit"
 v-model="selectedFruit"
/>
</template>

import vSelect from 'vue-select';

export default { components: { vSelect }, data() { return { selectedFruit: null }; } };

```

功能增强建议

对于需要更复杂功能的场景：

添加远程搜索功能，通过 AJAX 加载选项
实现标签化多选（tagging）
添加分组选项支持
自定义选项模板渲染
集成虚拟滚动优化大量数据性能

以上方法可根据项目需求选择，原生实现适合轻量级需求，集成 Select2 适合需要完整功能，vue-select 提供了开箱即用的平衡方案。

标签: vue select

分享给朋友：

vue 2.0 实现select 2