ElementUI的selsec组件自定义搜索方法filter-method的使用

7,407 阅读1分钟

 默认情况下,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)
        })
    }
}}