Vue01 | el-autocomplete远程搜索下拉框并实现自动填充

最新推荐文章于 2025-07-10 11:09:39 发布

原创

最新推荐文章于 2025-07-10 11:09:39 发布 · 2.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #autocomplete #远程搜索 #下拉框 #自动填充

本文介绍了如何在Vue中使用ElementUI的el-autocomplete组件实现远程搜索和自动填充功能。通过获取远程mock数据，特别是学生学号信息，根据输入实时查找目标。当选择学号后，自动填充姓名、生日和手机号等详细信息。在实现过程中，遇到的一个关键点是，由于autocomplete组件只识别value字段，因此需要利用JSON.stringify()方法将数据对象的属性转换为value，从而确保兼容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网的demo献上

在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据

官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。

-mock数据的获取-

我们要获取远程mock中所有学生的学号信息，根据输入的数据来远程查找目标，并且在选中该目标后能够自动填充对应的姓名、生日、手机等信息，实现快速获取信息的功能，再也不用手动一个个去输入所有的数据啦～

在template中添加el-autocomplete

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