el-select 可选择/可输入,自定义搜索方法
<el-select v-model="form.name"
placeholder="请选择/请输入"
clearable
filterable
:filter-method="filterName"
@blur="blurInput($event)"
@clear="clearInput">
<el-option v-for="item in nameList"
:key="item.id"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
getList() {
getList({}).then((res) => {
this.nameList = this.$utils.clone(res.data, true)
this.copyList = this.$utils.clone(res.data, true)
})
},
blurInput(e) {
if (e.target.value.trim() !== '') {
this.form.name = e.target.value
}
},
clearInput() {
this.nameList = this.$utils.clone(this.copyList, true)
},
filterName(data) {
let val = data.trim()
this.$set(this.form, 'name', val)
if (val) {
this.nameList = this.copyList.filter((item) => {
if (
!!~item.name.indexOf(val) ||
!!~item.name.toUpperCase().indexOf(val.toUpperCase())
) {
return true
}
})
} else {
this.nameList = this.$utils.clone(this.copyList, true)
}
},