当前位置：首页 > VUE

vue select实现搜索

2026-01-14 02:25:19VUE

vue select 实现搜索功能

在 Vue 项目中实现 select 搜索功能，可以通过原生 <select> 结合自定义搜索逻辑，或使用第三方库如 vue-select 快速实现。以下是两种常见方法：

方法一：使用原生 select 和 input 组合

通过监听输入框的输入事件，动态过滤选项列表。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." @input="filterOptions" />
    <select v-model="selectedOption">
      <option v-for="option in filteredOptions" :key="option.value" :value="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedOption: null,
      options: [
        { value: '1', label: '苹果' },
        { value: '2', label: '香蕉' },
        { value: '3', label: '橙子' }
      ],
      filteredOptions: []
    };
  },
  created() {
    this.filteredOptions = [...this.options];
  },
  methods: {
    filterOptions() {
      this.filteredOptions = this.options.filter(option =>
        option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

方法二：使用 vue-select 库

vue-select 是一个功能丰富的下拉选择组件，内置搜索功能。

安装依赖：
```
npm install vue-select
```

在组件中使用：


<template>
<v-select v-model="selected" :options="options" :filterable="true" />
</template>

import vSelect from 'vue-select'; import 'vue-select/dist/vue-select.css';

export default { components: { vSelect }, data() { return { selected: null, options: ['苹果', '香蕉', '橙子'] }; } };

```

自定义搜索逻辑增强

若需更复杂的搜索（如多字段匹配），可扩展过滤方法：

filterOptions() {
  this.filteredOptions = this.options.filter(option => {
    const query = this.searchQuery.toLowerCase();
    return (
      option.label.toLowerCase().includes(query) ||
      (option.desc && option.desc.toLowerCase().includes(query))
    );
  });
}