北京企业免费建站nba最新资讯

项目中需要实现搜索框搜索时能自动提示可选项的功能，elementui的input组件有已经封装好的el-autocomplete可以使用，但是在使用中发现一些问题，记录一下

基础使用

// html部分
<el-autocompletev-model="name":fetch-suggestions="querySearchAsync"placeholder="请输入关键词"value-key="name":trigger-on-focus="false"popper-class="autocompletePopper":popper-append-to-body="false"class="my-autocomplete"></el-autocomplete>// js部分querySearchAsync (queryStr, cb) {// 异步调用接口逻辑let results = 调用接口返回的数据中筛选出来的结果cb(results)},

自定义选项

// html部分
<el-autocompletev-model="name":fetch-suggestions="querySearchAsync"placeholder="请输入关键词"value-key="name":trigger-on-focus="false"popper-class="autocompletePopper":popper-append-to-body="false"class="my-autocomplete"><template slot-scope="{ item }"><div class="custom-item" :title="item.name">{{ item.name }}</div></template></el-autocomplete>// js部分querySearchAsync (queryStr, cb) {// 异步调用接口逻辑let results = 调用接口返回的数据中筛选出来的结果cb(results)},

需要注意的点

1、value-key="name"不能少，如果缺失会导致点击数据下拉选项后输入框无法赋值的情况
2、v-model="name"不能少，如果缺失会导致输入框无法赋值的情况
3、自定义选项需要注意，slot-scope的参数就是item