坑:
1.先从官网上找的例子,但是并不适用于我们正常企业开发中的数据调用接口来回显到弹出框列表中,已经实验过,在这里不做赘述。
2.解决办法:
- 用value-key,可自行官网查看:
<el-autocomplete
value-key="addr"
class="inline-input"
style="width: 20rem"
v-model="form.HOUSE_ADR"
:fetch-suggestions="querySearch"
@select="handleSelect"
placeholder="请输入地址"
></el-autocomplete>
querySearch(queryString, cb) {
get("api/adr",{
addr:this.form.HOUSE_ADR
}).then(res=>{
if(res){
this.address = res.data;
console.log('address',this.address);
// 调用 callback 返回建议列表的数据
cb(this.address);
}
})
},
- 接口返回的数据中没有value,需要自己手动添加。
<el-autocomplete
class="inline-input"
style="width: 20rem"
v-model="form.HOUSE_ADR"
:fetch-suggestions="queryAdrSearch"
@select="handleSelect"
placeholder="请输入地址"
></el-autocomplete>
queryAdrSearch(queryString, cb) {
get("api/adr",{
addr:this.form.HOUSE_ADR
}).then(res=>{
if(res){
this.address = res.data;
console.log('address',this.address);
// 调用 callback 返回建议列表的数据
this.address.forEach(res=>{
res.value = res.addr
})
cb(this.address);
}
})
},
element中的 el-autocomplete 搜索时输入后匹配输入建议必须有value属性