![](https://i-blog.csdnimg.cn/blog_migrate/f0ac77bdc5e450a6cc48acf3a6d26f34.png)
方法一:使用allow-create
属性即可通过在输入框中输入文字来创建新的条目
<el-form-item label="采购方式" prop="lngpurchasemodeid">
<bl-select
v-model="dialogForm.lngpurchasemodeid"
:options="purchasemodeList"
:props="{
value:'lngpurchasemodeid',
label: 'strpurchasemodename'
}"
allow-create
/>
</el-form-item>
方法二:
<el-form-item label="采购方式" prop="lngpurchasemodeid">
<el-popover
v-model="visible"
placement="bottom"
width="250"
trigger="manual"
>
<ul class="purchase scrollbarStyle">
<li v-for="item in purchasemodeList" :key="item.lngpurchasemodeid" value="item.lngpurchasemodeid" @click="purchaseFn(item)">{{ item.strpurchasemodename }}</li>
</ul>
<el-input
slot="reference"
v-model="dialogForm.strpurchasemodename"
@focus="purchaseFocus"
@blur="visible = !visible"
@input="filterFn"
/>
</el-popover>
</el-form-item>
methods:{
purchaseFn(item) {
this.dialogForm.lngpurchasemodeid = item.lngpurchasemodeid
this.dialogForm.strpurchasemodename = item.strpurchasemodename
this.visible = false
},
filterFn(val) {
this.purchasemodeList = this.copyOptionList.filter((item) => {
return PinyinMatch.match(item.strpurchasemodename, val) // (需要过滤的名称,输入的关键词)
})
},
purchaseFocus() {
this.visible = !this.visible
this.purchasemodeList = this.copyOptionList
}
}