項目中需要實現搜索框搜索時能自動提示可選項的功能，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