elementui的el-autocomplete远程搜索组件如何回显结果

<el-autocompletev-model="SName":fetch-suggestions="querySearchAsync":trigger-on-focus="false"@select="handleSelectScenic"
></el-autocomplete>

以上是组件标签，这里说明几个关键的参数：

fetch-suggestions：返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它

trigger-on-focus：是否在输入框 focus 时显示建议列表

@select方法是选中建议列表中的某一项

querySearchAsync(queryString, cd) {// 发请求获取搜索结果searchScenic(queryString).then(res => {// 定义一个空数组用来临时存放处理好的结果var restaurants = [];// 循环接口返回值，将接口返回对象的SName属性名改为ui组件要的valueres.data.forEach(item => {const value = JSON.parse(JSON.stringify(item).replace(/SName/g, "value"));// push到空数组restaurants.push(value);});// 清空定时器clearTimeout(this.timeout);// 定一个定时器，有结果之前展示loadingthis.timeout = setTimeout(() => {// 调用组件自定方法展示搜索结果cd(restaurants);}, 2000 * Math.random());});},handleSelectScenic(item) {// item是点击选中的一项console.log("item==>", item);}

功能完成。
需要注意的是回显的值必须是一个对象数组，且对象属性名称是 “value”，不然回显失败
queryString, cd 这俩个参数也是组件自己的，cd是一个方法，用来resolve结果；queryString是用户输入的关键字

elementui的el-autocomplete远程搜索组件如何回显结果相关推荐

记一次el-select远程搜索默认数据回显问题
在el-select远程搜索中会有个回显问题就是明明传入了绑定值但是却会显示不出来解决代码如下 <el-selectv-model="ruleForm.selectId" ...
elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？
如果有同学还没用过这个功能,可以先了解下: 使用场景大部分情况下使用 el-select 的时候,el-options 中 options 的值都是后端接口给的数据,直接赋值就可以了.但是有的时候数 ...
element 搜索匹配_如何在Element-ui中实现一个远程搜索功能
如何在Element-ui中实现一个远程搜索功能发布时间:2021-01-29 14:50:00 来源:亿速云阅读:87 作者:Leah 这篇文章给大家介绍如何在Element-ui中实现一个远程 ...
v-region 地址组件无法回显问题(选择地址保存后，打开编辑，发现刚才选择的地址【省市县乡】信息消失，信息不回显)
(Avue) 1.问题 v-region 地址组件无法回显(选择地址保存后,打开编辑,发现刚才选择的地址[省市县乡]信息消失,信息不回显) 选择好省市县乡后,保存,再次编辑,发现如下: 2.解决方案: ...
闲云旅游项目开发-（第四篇：机票首页/机票搜索功能（`el-autocomplete`远程搜索组件）/moment.js的使用/日期选择组件el-date-picker）
目录相关组件介绍一机票首页布局二封装搜索组件 1. 组件布局 2.目标思路 3.步骤 3.1 基本功能 3.2 自动补全 3.3获取真正的推荐数据 3.4 添加城市代号 3.5 处理日期格式 ...
vue TimePicker时间选择器组件的回显与格式转变
我们监听打印出来是这种格式: Tue Mar 30 2021 17:44:12 GMT+0800 而我们需要的是这种格式: 17:44:12 实现: 方法一(注:这种方法可回显):文档里有一个属性:v ...
vue+elementUI同时上传视频和图片并回显
1.效果 2.数据结构;根据name或url后缀来判断是图片或者视频类型 fileList = [{name:'123.mp4',url:'123.mp4'},{name:'124.png',url: ...
elementui Cascader 省市区联动选择器，应用与回显
目的:往数据库添加数据,形式为:xx省/xx市/xx县 ,并在前端回显 eg: 在element form表单里添加 <el-form-item label="地区" pro ...
elementui select选中获取整个item对象以及回显
问题描述: 常规的select选中若采用v-model绑定的参数进行获取,仅能获取到label值,获取不到整个item对象. 解决办法: 1. 设置select的 option的vule属性为 :va ...

elementui的el-autocomplete远程搜索组件如何回显结果

elementui的el-autocomplete远程搜索组件如何回显结果相关推荐

最新文章

热门文章