Vue el-autocomplete实现模糊查询

最近做了个输入框输入后，调取接口实现模糊查询的功能，话不多说开干

 

1.html部份

<el-autocomplete
 class="inline-input seletc-input_auto_select"
 v-model="form.divisionName"
 :fetch-suggestions="querySearchAsync"
 placeholder="请输入"
 @select="handleSelect"
></el-autocomplete>

1.:fetch-suggestions="querySearchAsync" 是存放下拉框中的数据

2.@select="handleSelect"是选中下拉框中的某一项后返回的值

2.methods部份

    querySearchAsync (queryString, cb) {
      if (queryString == '') {
        return
      }
      getAreaManageList({ divisionName: queryString }).then(res => { 
        if (res.rspCode == "0000" && res.result) {
          let arr = []
          res.result.list.forEach(ele => {
            arr.push({
              value:ele.divisionName
            })
          })
          cb(arr);
          console.log(cb);
        } else {
          cb([]);
        }
      })
    },

1.querySearchAsync有两个参数，queryString是输入框中输入的值，cb是下拉框，详情看下elementui文档

2.先判断queryString是否为空，空时不做操作

3.调接口传入输入的值，将拿到的数据放入数组中

        以下是arr数组的值，注意数组中对象的key一定需要是value，不然下拉框会没值

 

handleSelect (item) {
  this.form.divisionName = item.value
}

1.handleSelect中的参数item就是你选中的值

 ok，完美结束！