当前位置：首页 > VUE

vue实现select可以输入

2026-01-20 16:30:49VUE

实现可输入的选择框（Select with Input）

在Vue中实现一个可输入的选择框，通常结合原生HTML的<input>和<select>元素，或者使用第三方UI库如Element UI、Ant Design Vue等。以下是几种常见实现方式：

原生HTML + Vue实现

通过组合<input>和<select>，监听用户输入和选择事件：

<template>
  <div>
    <input 
      v-model="inputValue" 
      @input="handleInput" 
      placeholder="输入或选择"
    />
    <select v-model="selectedOption" @change="handleSelect">
      <option v-for="option in options" :value="option" :key="option">
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      selectedOption: '',
      options: ['选项1', '选项2', '选项3']
    };
  },
  methods: {
    handleInput() {
      this.selectedOption = this.inputValue;
    },
    handleSelect() {
      this.inputValue = this.selectedOption;
    }
  }
};
</script>

使用Element UI的`el-select`组件

Element UI的el-select支持可搜索和自定义输入：

<template>
  <el-select
    v-model="selectedValue"
    filterable
    allow-create
    placeholder="输入或选择"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

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

关键属性：
- filterable：启用搜索功能。
- allow-create：允许用户输入新选项。

使用Ant Design Vue的`a-select`组件

Ant Design Vue的a-select支持组合输入和选择：

<template>
  <a-select
    v-model:value="selectedValue"
    mode="tags"
    placeholder="输入或选择"
    :options="options"
  />
</template>

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

关键属性：
- mode="tags"：允许输入新标签（选项）。

自定义实现（带下拉建议）

通过监听输入事件动态过滤选项：

vue实现select可以输入

<template>
  <div>
    <input 
      v-model="query" 
      @input="filterOptions" 
      placeholder="输入搜索"
    />
    <ul v-if="filteredOptions.length">
      <li 
        v-for="option in filteredOptions" 
        :key="option" 
        @click="selectOption(option)"
      >
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      options: ['苹果', '香蕉', '橙子'],
      filteredOptions: []
    };
  },
  methods: {
    filterOptions() {
      this.filteredOptions = this.options.filter(option =>
        option.includes(this.query)
      );
    },
    selectOption(option) {
      this.query = option;
      this.filteredOptions = [];
    }
  }
};
</script>