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