Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

<el-autocomplete 
 placeholder="请输入studentID"
 v-model="form.studentID" 
 :fetch-suggestions="querySearchAsync" 
 @select="handleSelect" 
>
</el-autocomplete>

//queryString 为在框中输入的值
//cb 回调函数，将处理好的数据推回
querySearchAsync(queryString, cb) {
 var studentBasic = this.studentBasic;
 console.log(studentBasic)
 var results = queryString "text-align: center">-

-踩坑点之value字段-
看了网上很多demo都说后台获取的数据对象必须有value关键字，因为autocomplete只识别value字段，这里有一个实现的小trick：


this.studentBasic= JSON.parse(JSON.stringify(this.list).replace(/studentID/g,"value"));


JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以替换值，或者如果指定了replacer是一个数组，可选的仅包括指定的属性。这样我们就可以把自己的属性都替换成value字段啦～cool


总结
以上所述是小编给大家介绍的Vue el-autocomplete远程搜索下拉框并实现自动填充功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！