Vue Autocomplete 自動完成功能簡單示例
更新時間：2019年05月25日 10:44:10 作者：xudejun
這篇文章主要介紹了Vue Autocomplete 自動完成功能,結合簡單示例形式分析了Vue使用el-autocomplete組件實現自動完成功能相關操作技巧,需要的朋友可以參考下
本文實例講述了Vue Autocomplete 自動完成功能。分享給大家供大家參考，具體如下：
頁面 ：
用閉包的方式，index表示第幾個組件
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="請輸入內容"
@select="((item)=>{handleSelect(item, index)})">
</el-autocomplete>
JS：
methods: {
querySearchAsync(queryString, callback) {
var list = [{}];
//調用的后臺接口
//let url = 后臺接口地址 + queryString;
//從后臺獲取到對象數組
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; //將想要展示的數據作為value
}
list = data.content;
callback(list);
}).catch((error) => {
console.log(error)
})
},
handleSelect(item,index) {
this.dataForm.items[index] = item
}
}
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
這篇文章主要介紹了使用Element實現表格表頭添加搜索圖標和功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue遞歸獲取父元素的元素實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue中的keep-alive內置組件緩存，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
詳解vue2.0 transition 多個元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個元素嵌套使用過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
elementui+vue+axios實現文件上傳本地服務器
這篇文章主要為大家詳細介紹了elementui+vue+axios實現文件上傳本地服務器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了Antd中單個DatePicker限定時間輸入范圍操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
最近在使用element-ui的表格組件時,遇到了搜索框功能的實現問題,這篇文章主要給大家介紹了關于如何使用elementUI組件實現表格的分頁及搜索功能的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
Editor.js是一個用于構建具有完全可定制化塊結構的現代編輯器的開源庫,它提供了一個簡潔、可擴展和易于使用的接口,使開發(fā)人員能夠創(chuàng)建擁有豐富內容和互動性的編輯器,這篇文章主要給大家介紹了關于vue3使用富文本編輯器Editor.js的簡單方法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12