在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名、生日、手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦~在template中添加el-autocomplete在script中添加以下函数选中目标学号以后自动补全其他mock的数据看了网上很多demo都说后台获取的数据对象必须有value关键字,因为autocomplete只识别value字段,这里有一个实现的小trick:

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

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

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