el-select下拉选项精确筛选

502 阅读1分钟

el-select下拉选项支持模糊筛选,只需要加filterable属性即可

<el-select 
    v-model="value" 
    filterable 
    placeholder="Select" 
> 
    <el-option 
        v-for="item in options" 
        :key="item.value" 
        :label="item.label" 
        :value="item.value" 
    /> 
</el-select>

要实现下拉选项精确筛选,就需要自定义筛选逻辑

  <el-select
    v-model="value"
    placeholder="请选择"
    filterable
    :filter-method="filterMethod"
  >
    <el-option
      v-for="item in options"
      :key="item"
      :label="item"
      :value="item"
    >
    </el-option>
  </el-select>
// @param value:用户输入的筛选内容
const filterPurchaseInvoiceCode = (value: string) => {
  if (value) {
    options.value = optionList.value?.filter(
      (item) => {
        return item === value;
      }
    );
  } else {
    options.value = optionList.value;
  }
};