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)完成功能。分享給大家供大家參考，具體如下：
頁(yè)面 ：
用閉包的方式，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)文章
使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue遞歸獲取父元素的元素實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
詳解vue2.0 transition 多個(gè)元素嵌套使用過(guò)渡
這篇文章主要介紹了詳解vue2.0 transition 多個(gè)元素嵌套使用過(guò)渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
elementui+vue+axios實(shí)現(xiàn)文件上傳本地服務(wù)器
這篇文章主要為大家詳細(xì)介紹了elementui+vue+axios實(shí)現(xiàn)文件上傳本地服務(wù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作
這篇文章主要介紹了Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
如何使用elementUI組件實(shí)現(xiàn)表格的分頁(yè)及搜索功能
最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問(wèn)題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實(shí)現(xiàn)表格的分頁(yè)及搜索功能的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題
這篇文章主要介紹了vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題,文中還給大家提到了vue中axios解決跨域問(wèn)題和攔截器使用，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法
Editor.js是一個(gè)用于構(gòu)建具有完全可定制化塊結(jié)構(gòu)的現(xiàn)代編輯器的開(kāi)源庫(kù),它提供了一個(gè)簡(jiǎn)潔、可擴(kuò)展和易于使用的接口,使開(kāi)發(fā)人員能夠創(chuàng)建擁有豐富內(nèi)容和互動(dòng)性的編輯器,這篇文章主要給大家介紹了關(guān)于vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue鍵盤(pán)事件keyup、keydown的作用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12