Vue Autocomplete 自動完成功能簡單示例
更新時間：2019年05月25日 10:44:10 作者：xudejun
這篇文章主要介紹了Vue Autocomplete 自動完成功能,結(jié)合簡單示例形式分析了Vue使用el-autocomplete組件實現(xiàn)自動完成功能相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Vue Autocomplete 自動完成功能。分享給大家供大家參考，具體如下：
頁面 ：
用閉包的方式，index表示第幾個組件
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="請輸入內(nèi)容"
@select="((item)=>{handleSelect(item, index)})">
</el-autocomplete>
JS：
methods: {
querySearchAsync(queryString, callback) {
var list = [{}];
//調(diào)用的后臺接口
//let url = 后臺接口地址 + queryString;
//從后臺獲取到對象數(shù)組
this.$http({
url: this.$http.adornUrl('yjtgateway/goods'),
method: 'get',
params: this.$http.adornParams({keyword:queryString})
}).then(({data}) => {
for(let i of data.content){
i.value = i.goodsCode; //將想要展示的數(shù)據(jù)作為value
}
list = data.content;
callback(list);
}).catch((error) => {
console.log(error)
})
},
handleSelect(item,index) {
this.dataForm.items[index] = item
}
}
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
本文給大家詳細講述了Vue2.0中集成UEditor富文本編輯器的方法以及相關(guān)注意事項做了講述，有興趣的朋友學(xué)習(xí)下。2018-03-03
在 Vue 中，如果直接對數(shù)組進行操作，比如使用下標(biāo)直接修改元素，數(shù)組長度不變時， Vue 是無法監(jiān)測到這種變化的，導(dǎo)致無法觸發(fā)視圖更新。針對該問題本文為大家整理了一些方法，需要的可以參考一下2023-01-01
vue-element-admin如何轉(zhuǎn)換成中文
這篇文章主要介紹了vue-element-admin如何轉(zhuǎn)換成中文問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了vue 彈出框引入另一個vue頁面,這種方式適用于在一個頁面邏輯比較多的時候,可以搞多個頁面,防止出錯,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)簡易的車牌輸入鍵盤效果,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解下2023-11-11
Vue3?使用Element?Plus表格單選帶checkbox功能
這篇文章主要介紹了Vue3?使用Element?Plus表格單選帶checkbox,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-11-11
這篇文章主要為大家介紹了electron打包中的巨坑解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
defineProps是Vue3中的一種新的組件數(shù)據(jù)傳遞方式,可以用于在子組件中定義接收哪些父組件的props,這篇文章給大家介紹vue3中defineProps及使用方法詳解,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了在vue2.0中引用element-ui組件庫,需要的朋友可以參考下2018-06-06