vue3 下拉框自带的模糊查询不准确 el-autocomplete

标签：el const toLowerCase queryString value autocomplete state return 下拉框

一、元素标签写法

 <el-form-item label="配件名称" prop="materialName">
      <el-autocomplete style="width:100%" v-model="form_feiyong.materialName" 
     :fetch-suggestions="querySearchVType" clearable  placeholder="请选择配件名 
      称" @select="selectMaterial" value-key="value" @change="selectMaterial"/>
 </el-form-item>

二、具体方法

  const restaurants = ref([])

// 配件名称过滤修改
const querySearchVType = (queryString:string, cb:any)=>{
  restaurants.value = state.materialOption;
  let results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value;
  // 调用 callback 返回建议列表的数据
  cb(results);
}

// 过滤方法的实现 const createFilter = (queryString:string)=> {   return (restaurant:any) => {     //  第一个字或者字母匹配 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > ===0 );     // 下面的写法支持模糊查询     return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);   } }

// 选择配件名称
const selectMaterial=(value) =>{
  if(value === ""){
    state.form_feiyong.materialSpec=""
    state.materialSpecOption=[]
    state.form_feiyong.materialType=""
    state.materialTypeOption=[]
  }else{
    // 根据配件名称过滤配件规格
    state.materialSpecOption=state.materialAllOption.filter((item) =>{
      return item.materialName == value.value
    })
  }
}

 

标签：el,const,toLowerCase,queryString,value,autocomplete,state,return,下拉框
From： https://www.cnblogs.com/flyShare/p/18551708