Vue可输入的下拉框

原文链接：https://blog.csdn.net/m0_72189030/article/details/130881295
<template>
<el-select
v-model="value"
placeholder="请选择"
clearable
:style="{ width: '100%' }"
filterable
allow-create
:filter-method="filterMethod"
default-first-option
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.id"
></el-option>
</el-select>
</template>

<script>
export default {
data() {
return {
value,
options: [
{
label: "Java开发",
id: "1"
},
{
label: "web开发",
id: "2"
},
{
label: "c++开发",
id: "3"
}
]
};
},
methods:{
filterMethod(val){
this.value=val
},

}
};
</script>

<style></style>

在代码中加入以下熟悉便可实现带输入功能的下拉框

filterable 是否可以搜索
allow-create 是否可以创建新选项，也就是是否可以输入，需要配合filterable使用
:filter-method="filterMethod" 自定义的方法
default-first-option 在输入框按回车键，选择第一个匹配项