el-autocomplete 回车时获取数据,获取数据之后再弹出下拉框

`el-autocomplete` 是 Element UI 提供的一个用于快速输入建议列表的组件，它在用户按下回车键时，通常会触发搜索操作并从服务器或本地数据源获取匹配的数据。当数据返回后，`el-autocomplete` 会在回调函数中更新其结果，并基于新的数据动态显示下拉框。

以下是一个简单的步骤描述：

1. 初始化 `el-autocomplete` 组件，设置 `fetchData` 函数作为回车事件的处理器：

<el-autocomplete
  v-model="inputValue"
  :fetch-data="fetchSuggestions"
></el-autocomplete>

2. 定义 `fetchSuggestions` 函数，这个函数接收查询关键字作为参数，发送请求获取数据，然后返回一个新的数组供组件渲染：

methods: {
  fetchData(queryString) {
    // 发送异步请求，假设 dataService 是一个 API 调用辅助工具
    const results = dataService.search(queryString);
    
    // 如果有结果返回，清除当前的选项，并填充新数据
    if (results.length > 0) {
      this.suggestions = results;
    } else {
      this.suggestions = []; // 或者你可以选择默认空数组或者不展示任何选项
    }
  },
}

3. 当数据加载完成，下拉框会被自动展开，因为 Vue 的响应式系统会更新 `suggestions` 数组。