el-select可新增输入,可选择
最近在做一个功能,客户提出既可以下拉选择名称,也可以自己输入名称。用的el-select自带属性实现,但是需要点击回车才可以实现输入,弄了挺久才想到@input.native事件,通过input事件来赋值,很好的实现了可选择,可输入。1,通过filterable筛选属性,来实现可输入的下拉框。2.失去焦点给输入框赋值。......
·
最近在做一个功能,客户提出既可以下拉选择名称,也可以自己输入名称。用的el-select自带属性实现,但是需要点击回车才可以实现输入,弄了挺久才想到通过ref属性获取输入内容,在@blur中进行赋值,很好的实现了可选择,可输入。
1,通过filterable筛选属性,来实现可输入的下拉框
//filterable属性必须为true
<el-select
v-model="name"
allow-create
default-first-option
filterable
value-key="name"
@blur="nameblur()"
ref="nameSel"
>
<el-option
v-for="item in list"
:key="item"
:label="item"
:value="item"
/>
</el-select>
2.失去焦点给输入框赋值
//可通过ref属性获取当前select选择器中的输入内容
nameblur(){
this.name = this.$refs.tableName.selectedLabel
}
更多推荐
已为社区贡献2条内容
所有评论(0)