Use the filter-method attribute under Select in Element-Plus in vue3.0

Use the filter-method attribute under Select in Element-Plus

basic use

We all know that there is a very useful attribute Element-Plusin , which can be used by adding it, and it will open a search functionSelectfilterableSelect

Customize the query or get the input value of the drop-down box

When we don't want to use its default search method, or get the value entered in the drop-down box, we can use it to filter-methodachieve it. Note that it will be invalid if it is used after use , filterablebut the value cannot be entered without the drop-down box, so it is still to be used withfilter-methodfilterablefilterable

Dropdown box:

 <el-select
                  v-model="form.outTruckId"
                  placeholder=" "
                  filterable
                  clearable
                  :filter-method="outTruckinput"
                  @clear="outclear"
                  v-if="scope.row.action == 'edit'"
                >
                  <el-option
                    v-for="item in OutTruckOptionList"
                    :key="item.keyCode"
                    :label="item.valueCode"
                    :value="item.keyCode"
                  />
                </el-select>

function

// 获取下拉框的输入值
function outTruckinput(e) {
    
    
  // 自定义查询方法
  let list = ref();
  list.value = OutTruckOptionList.value;

  if (e) {
    
    
    OutTruckOptionList.value = list.value.filter((item) => {
    
    
      return item.valueCode.indexOf(e) > -1;
    });
  } else {
    
    
    //刷新下拉列表
    console.log("刷新下拉列表,重新给OutTruckOptionList.value赋值");
  }
}