当前位置：首页 > VUE

vue实现select查询

2026-02-11 06:58:32VUE

Vue 实现 Select 查询功能

在 Vue 中实现 Select 查询功能，通常需要结合下拉选择框和输入查询功能。以下是几种常见的实现方式：

vue实现select查询

使用原生 HTML select 元素

<template>
  <div>
    <select v-model="selectedOption">
      <option v-for="option in options" :value="option.value" :key="option.value">
        {{ option.label }}
      </option>
    </select>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

使用 Element UI 的 Select 组件

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

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      value: ''
    }
  }
}
</script>

实现带搜索功能的 Select

<template>
  <div>
    <input type="text" v-model="searchQuery" placeholder="Search...">
    <select v-model="selectedOption">
      <option 
        v-for="option in filteredOptions" 
        :value="option.value" 
        :key="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedOption: '',
      options: [
        { value: '1', label: 'Apple' },
        { value: '2', label: 'Banana' },
        { value: '3', label: 'Orange' }
      ]
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => {
        return option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      })
    }
  }
}
</script>

使用 Vue Select 第三方库

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

在组件中使用：


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

import vSelect from 'vue-select'

export default { components: { vSelect }, data() { return { selected: null, options: ['foo', 'bar', 'baz'] } } }

```

实现远程搜索

<template>
  <el-select
    v-model="value"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      value: [],
      loading: false
    }
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    }
  }
}
</script>

自定义 Select 组件

<template>
  <div class="custom-select">
    <div class="selected" @click="toggleOptions">
      {{ selectedOption.label || 'Select an option' }}
    </div>
    <div class="options" v-show="showOptions">
      <input type="text" v-model="searchQuery" placeholder="Search...">
      <div 
        v-for="option in filteredOptions" 
        :key="option.value" 
        @click="selectOption(option)">
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['options'],
  data() {
    return {
      selectedOption: {},
      showOptions: false,
      searchQuery: ''
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => {
        return option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      })
    }
  },
  methods: {
    toggleOptions() {
      this.showOptions = !this.showOptions
    },
    selectOption(option) {
      this.selectedOption = option
      this.showOptions = false
      this.$emit('input', option.value)
    }
  }
}
</script>

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

这些方法提供了从简单到复杂的不同实现方式，可以根据项目需求选择合适的方案。对于大多数项目，使用成熟的UI库如Element UI或Ant Design Vue中的Select组件是最便捷的选择。