默认情况下,Select 会找出所有label属性包含输入值的选项
<el-select v-model="value" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>如果希望使用其他的搜索逻辑,可以通过传入一个filter-method来实现。filter-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值
<el-select v-model="value" filterable placeholder="请选择" :filter-method="filterMethod">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>//自定义筛选条件filterMethod(val){
if(!val){//当清空输入值时,重置options
this.options = JSON.parse(JSON.stringify(this.copyOptions))
}else{
this.options = this.copyOptions.filter((item) {
return item.xxx.includes(val)//默认情况下xxx为label
})
}当select为子组件,需要从父组件传递filter-method时
props:{
filterMethodDefined: {
type: Function,
default(item, val) {
return item.label.includes(val)
}
}}
}
//自定义筛选条件
filterableMethod(val){
if(!val){
this.options = JSON.parse(JSON.stringify(this.copyOptions))
}else{
if(this.filterMethodDefined && typeof this.filterMethodDefined == 'function'){
this.options = this.copyOptions.filter((item) => {
return this.filterMethodDefined(item, val)
})
}
}}