Vue项目Element UI el-autocomplete fetch-suggestions返回数据不展示问题

错误原因排查 #

• fetch-suggestions 绑定的回调函数默认接收两个入参：搜索关键词、组件内置的回调函数，你获取到数据后必须将选项数组传入该回调执行，组件才会渲染下拉列表，当前代码未定义也未调用该回调。
• el-autocomplete 默认读取选项的 value 字段作为展示文本，你返回的数组项用的是 name 字段，需要额外指定展示字段，否则识别不到显示内容。
• 代码中 this.searchList = resSearchList.name 逻辑错误，resSearchList 是数组类型，直接取 .name 会返回 undefined，且 el-autocomplete 不需要额外绑定选项列表变量，无需该赋值操作。
• loading 属性未加动态绑定标识 :，导致加载状态不会跟随 loadingCascade 变量变化。

修复后代码 #

模板部分 #

<el-autocomplete
  v-model="searchValue"
  :fetch-suggestions="getData"
  placeholder="Type here"
  :loading="loadingCascade"
  value-key="name"
></el-autocomplete>

新增了 value-key="name" 指定用数组项的name字段作为展示文本，同时给loading属性加上了动态绑定。

methods部分 #

getData(searchString, callback) {
  if (searchString !== '') {
    this.loadingCascade = true
    setTimeout(() => {
      this.$API.Public.getData(searchString)
        .then(res => {
          const result = res.data
          const resSearchList = result.data || []
          // 插入自定义搜索项
          const customItem = {id: searchString, name: searchString}
          resSearchList.unshift(customItem)
          // 调用回调传入选项数组，组件自动渲染
          callback(resSearchList)
        })
        .catch(err => {
          // 异常场景返回空数组避免报错
          callback([])
        })
        .finally(() => {
          this.loadingCascade = false
        })
    }, 500)
  } else {
    // 空搜索直接返回空数组
    callback([])
  }
}

修改点：

1. 新增第二个入参callback，拿到数据后直接传入回调触发渲染
2. 移除了无效的this.searchList赋值逻辑
3. 异常场景也调用callback返回空数组，避免组件状态异常
4. 空搜索场景直接返回空数组，符合交互预期

内容的提问来源于stack exchange，提问作者boldsinas101