当前位置:网站首页>emement中的el-input 搜索时输入后匹配输入建议必须有value属性
emement中的el-input 搜索时输入后匹配输入建议必须有value属性
2022-04-21 18:53:00 【发与少年】
1、项目需求中,有用到el-input输入后联想匹配输入建议,并以下拉菜单的形式展示,如图:

2、但是后台返回的值当中有名称,没有value属性,

然后联想搜索的下来数据不展示

3、解决办法:给每一项添加vaule字段就可以了,然后再指向他的回调就可以解决掉了

<el-form-item label="添加影片:">
<el-autocomplete class="inline-input"
v-model="searchFilm.keyword"
style="width: 482px"
:fetch-suggestions="searchFilmFn"
:trigger-on-focus="false"
placeholder="请输入影片名称搜索"
@select="handleSelect"
></el-autocomplete>
<el-button type="primary" class="add_btn" @click="addFilmFn" >添加</el-button>
<span v-if="addMoviesList.length > 499" style="color : red">一个片单最多可包含500部影片</span>
</el-form-item>

// 返回输入建议的方法
searchFilmFn(keyword,cb) {
clearTimeout(this.timer)
// 影片关键字
this.timer = setTimeout( async()=>{
const res = await searchFilmApi(this.searchFilm)
console.log('res',res);
this.moviesList = res.movies
this.moviesList.forEach(res=>{
res.value = res.name
})
// 调用 callback 返回建议列表的数据
cb(this.moviesList);
},500)
},

添加了vaule字段就可以正常显示了
版权声明
本文为[发与少年]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_58206564/article/details/124255997
边栏推荐
- The central bank defines the key points of payment supervision in 2022, and all platform enterprises should pay attention to clearing risks
- 干货 | 面试过了,如何谈薪资?拿高薪Offer有哪些技巧?
- 【ES6】let、const、解构赋值、模板字符串
- 【无标题】
- SVG系列——2,绘制一些形状
- 大厂推荐使用的网关解密:Fizz Gateway后台管理系统功能模块介绍
- 如何在PR中调节预览视频的速度,及播放速度;
- Serialized object + properties + IO framework
- 牛客 - 另类加法
- DX12渲染引擎目录
猜你喜欢

LeetCode1765. 地图中的最高点(BFS)

108. 将有序数组转换为二叉搜索树(图文并解)

手把手教会你搭建组件与应用

Comment voir la structure zskiplist dans le code source redis

看机器人教育二十一世纪之变

The interviewer asked me about my understanding of the transaction isolation mechanism? That's my answer

如何查看redis源碼中的 zskiplist 結構
![[short-time amplitude spectrum] matlab simulation of short-time amplitude spectrum estimation in speech enhancement](/img/b5/a3843896a33bdb94dead3a9be489b8.png)
[short-time amplitude spectrum] matlab simulation of short-time amplitude spectrum estimation in speech enhancement

CVPR2022 Oral | CosFace、ArcFace的大统一升级,AdaFace解决低质量图像人脸识

Crystal Chem小鼠葡萄糖检测试剂盒说明书
随机推荐
ViewPager中Fragment状态保存的哪些事
What kind of Bluetooth headset is inexpensive and practical? Wireless Bluetooth headset for student party
SPFA determines whether there is a negative ring
每日一题系列:洗牌
The interviewer asked me about my understanding of the transaction isolation mechanism? That's my answer
Log4j日志的用法
天旦发布云原生智能运维产品线,推出全球首个全栈可观测性技术标准
Major event review Carnival link construction
TypeScript快速上手,class,public,private,extends
毕业三年,一事无成,被迫回老家,一个决定改变一生。
URL转码问题:URLDecoder.decode(str)过时,解决:decode(String s, String enc) throws UnsupportedEncodingExceptio
SQL 数据类型
The video course "vite Learning Guide - webify deployment project based on Tencent cloud" was launched "cloud + community"
The Renaissance of digital art, the exploration and rise of Digital Collections
MySQL数据库学习---第六章多表查询的课后习题
数据库进阶学习:存储引擎
刚毕业大学生考PMP用处大吗?
Abbexa 驴抗山羊 IgG (H&L) 抗体
Semaphore and exchange of concurrent tools
How to be a good project manager?