在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

 <el-autocomplete
              v-model.trim="addForm.companyName" //data中的双向数据
              style="width:100%"
              class="inline-input"
              :fetch-suggestions="querySearchAsync" //触发的方法
              placeholder="请输入内容"
              @select="handleSelect" // 下拉选择触发的方法
            />

js:

// 模糊查询
// queryString 为在框中输入的值
// callback 回调函数,将处理好的数据推回
querySearchAsync(queryString, callback) {
      let list = [{}]
      // 调用的后台接口
      const params = { 'pageNum': this.queryParams.pageNum, 'pageSize': this.queryParams.pageSize, 'name': queryString }
      // 从后台获取到对象数组
      getCompanyList(params).then((res) => {
        // 在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
        // console.log(res.data.list)
        for (const i of res.data.list) {
          // 将想要展示的数据作为value
          i.value = i.name
        }
        list = res.data.list
        this.addForm.companyId = ''
        // this.clearValidate('companyName')
        callback(list)
      }).catch((error) => {
        console.log(error)
      })
},
// 点击下拉列表触发的方法
handleSelect(item) {
      this.$refs['addForm'].clearValidate('companyName') // 移除校验结果
      this.addForm.companyName = item.name
      this.addForm.companyId = item.id
},
    ```
    
    //灵活使用elementUI 中的事件方法