自己建设影视网站,邯郸wap网站建设价格,企业网站备案教程,化学商城网站建设项目中需要实现搜索框搜索时能自动提示可选项的功能#xff0c;elementui的input组件有已经封装好的el-autocomplete可以使用#xff0c;但是在使用中发现一些问题#xff0c;记录一下
基础使用
// html部分
el-autocompletev-modelname:fetch-suggestion…项目中需要实现搜索框搜索时能自动提示可选项的功能elementui的input组件有已经封装好的el-autocomplete可以使用但是在使用中发现一些问题记录一下
基础使用
// html部分
el-autocompletev-modelname:fetch-suggestionsquerySearchAsyncplaceholder请输入关键词value-keyname:trigger-on-focusfalsepopper-classautocompletePopper:popper-append-to-bodyfalseclassmy-autocomplete/el-autocomplete// js部分querySearchAsync (queryStr, cb) {// 异步调用接口逻辑let results 调用接口返回的数据中筛选出来的结果cb(results)},自定义选项
// html部分
el-autocompletev-modelname:fetch-suggestionsquerySearchAsyncplaceholder请输入关键词value-keyname:trigger-on-focusfalsepopper-classautocompletePopper:popper-append-to-bodyfalseclassmy-autocompletetemplate slot-scope{ item }div classcustom-item :titleitem.name{{ item.name }}/div/template/el-autocomplete// js部分querySearchAsync (queryStr, cb) {// 异步调用接口逻辑let results 调用接口返回的数据中筛选出来的结果cb(results)},需要注意的点
1、value-keyname不能少如果缺失会导致点击数据下拉选项后输入框无法赋值的情况 2、v-modelname不能少如果缺失会导致输入框无法赋值的情况 3、自定义选项需要注意slot-scope的参数就是item
