Vue3 - Element Plus 选择器 el-select 既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）

### Vue3 中使用 Element Plus `el-select` 的方法 在 Vue3 和 Element Plus 组件库中，`el-select` 是一个非常灵活的选择器组件。此选择器不仅支持从预定义选项列表中选择项目，还允许用户手动输入文本[^1]。 #### 基本属性配置 为了使 `el-select` 支持既可以从下拉菜单中选择也可以让用户自由输入的功能，需设置特定的属性： - **filterable**: 启用过滤模式，使得用户可以在输入框内键入字符来筛选匹配项。 - **allow-create**: 当开启时，如果用户的输入不在候选列表里，则会创建一个新的条目作为选中的值。 - **default-first-option**: 自动将第一个建议项设为默认高亮显示，在按下回车键后自动完成选择操作而无需额外点击确认按钮。 这些特性结合起来能够提供更佳用户体验的同时也增加了灵活性。 ```html <template> <div id="app"> <!-- 可搜索并能自定义新标签 --> <el-select v-model="value" filterable allow-create default-first-option placeholder="请选择文章标签"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> </template> <script setup lang="ts"> import { ref } from &#39;vue&#39; const value = ref(&#39;&#39;) const options = [ { value: &#39;HTML&#39;, label: &#39;HTML&#39; }, { value: &#39;CSS&#39;, label: &#39;CSS&#39; } ] </script> ``` 上述代码展示了如何通过简单的几个属性组合实现了一个既可以下拉选择又能手工录入的新颖型选择控件。这非常适合用于那些需要用户提供个性化或者未预见的数据场景下的表单设计需求。