网站建设a云世家宋南南,软件公司招聘,电子商务网站建设实验报告,购买域名的网站项目中需要实现搜索框搜索时能自动提示可选项的功能#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
