美文网首页
el-autocomplete 远程搜索

el-autocomplete 远程搜索

作者: Null丶sleep | 来源:发表于2020-09-12 15:42 被阅读0次
                  <el-autocomplete  
                    v-model="formOne.businessTypeName" 
                    :fetch-suggestions="querySearchAsync"
                    @select="querySearchAsyncIone" 
                    placeholder="可输入关键字联想查询" />
//在 data  中声明 timeout: null,
  querySearchAsync(queryString, cb) {
      clearTimeout(this.timeout)
      let results = []
      if (queryString == ''||queryString==undefined) {
       cb(results)
      } else {
        //掉接口需要的参数
        //这里去掉后端的接口.根据自己接口的情况进行赋值
        getPForm(this.formOne.businessTypeName).then((res) => {
         //(res)
          if (res.data.code == '0000') {
            var result = res.data.record
            //循环放到一个远程搜索需要的数组
            for (let i = 0; i < result.length; i++) {
              const element = result[i]
              results.push({
                value: element.paramName,
                id: element.paramCode,
              })
            }
            cb(results)
          } else {
            results = []
            cb(results)
          }
        })
      }
    },
    //远程搜索赋值操作
    querySearchAsyncIone(val) {
       //(val)
      this.formOne.businessType = val.id
      this.formOne.businessTypeName = val.value
      // if (val.value == undefined) {
      //   this.formOne.businessTypeName = val.value
      // }
    },

相关文章

网友评论

      本文标题:el-autocomplete 远程搜索

      本文链接:https://www.haomeiwen.com/subject/opdbektx.html