下拉搜索el-autocomplete

template

<el-form-item label="型号" prop="modelId" v-show="false">
    <el-input
      v-model="queryParams.modelId"
      placeholder="请输入型号"
      clearable
      @keyup.enter="handleQuery"
    />
  </el-form-item>
  <el-form-item label="型号" prop="modelName"> 
    <el-autocomplete
        v-model="queryParams.modelName" 
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelectQuery"
        @keyup.enter="handleQuery"
        clearable
        value-key="value"
      ></el-autocomplete>
  </el-form-item>

js

/**在表格中显示时，根据id找到对应的name */
function handleModel(id){
  console.log(models.value);
  const name = models.value.filter(name => name.id == id);
  return name.length != 0 ? name[0].value : "";
}
/**搜索下拉列表数据 */
function getModelList() {
  listEquipmentModel().then((response) => {
    //  数据重组
    models.value = response.rows.map((item) => {
      return {
        value: item.modelName,
        id: item.modelId,
      };
    });
  });
}
function querySearchAsync(queryString, cb) {
  console.log(queryString, cb);
  var models1 = models.value;
  if (queryString == "null") {
    queryString = "";
  }
  var results = queryString
    ? models1.filter(createStateFilter(queryString))
    : models1;
  clearTimeout(timeout.value);
  timeout.value = setTimeout(() => {
    cb(results);
  }, 500 * Math.random());
}
/**输入转换为小写 */
function createStateFilter(queryString) {
  return (state) => {
    return state.value.toLowerCase().includes(queryString.toLowerCase());
  };
}
/**搜索选择 */
function handleSelectModel(item) {
  form.value.modelId = item.id;
}
/**表单选择 */
function handleSelectQuery(item) {
  queryParams.value.modelId = item.id;
}
getList();
getModelList();