溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能(推薦)

發(fā)布時間：2020-08-19 18:33:30 來源：腳本之家 閱讀：697 作者：weixin_43824717 欄目：web開發(fā)

官網(wǎng)的demo獻上

在elementui Input輸入框中可以找到遠程搜索組件，獲取服務(wù)端的數(shù)據(jù)

Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能(推薦)

官網(wǎng)中的數(shù)據(jù)list都是寫在loadAll()中的，而如果我們此時要用到mock的數(shù)據(jù)就要在此基礎(chǔ)上對代碼進行修改。

-mock數(shù)據(jù)的獲取-

我們要獲取遠程mock中所有學(xué)生的學(xué)號信息，根據(jù)輸入的數(shù)據(jù)來遠程查找目標，并且在選中該目標后能夠自動填充對應(yīng)的姓名、生日、手機等信息，實現(xiàn)快速獲取信息的功能，再也不用手動一個個去輸入所有的數(shù)據(jù)啦～

在template中添加el-autocomplete

<el-autocomplete 
 placeholder="請輸入studentID"
 v-model="form.studentID" 
 :fetch-suggestions="querySearchAsync" 
 @select="handleSelect" 
>
</el-autocomplete>

在script中添加以下函數(shù)

//queryString 為在框中輸入的值
//cb 回調(diào)函數(shù)，將處理好的數(shù)據(jù)推回
querySearchAsync(queryString, cb) {
 var studentBasic = this.studentBasic;
 console.log(studentBasic)
 var results = queryString ? studentBasic.filter(this.createStateFilter(queryString)) : studentBasic;
 console.log('results '+results)
 clearTimeout(this.timeout);
 this.timeout = setTimeout(() => {
  cb(results);
 }, 0.5*1000);
 },
//根據(jù)輸入的字段進行篩選
createStateFilter(queryString) {
 return (state) => {
 return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
 };
 },

//將其他數(shù)據(jù)自動補全，采用覆蓋的方法
handleSelect(item){
 this.form.name = item.name;
 this.form.studentID = item.value;
 this.form.birth = item.birthday;
 this.form.region = item.city;
 this.form.phone = item.phone;
 }

選中目標學(xué)號以后自動補全其他mock的數(shù)據(jù)

Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能(推薦)-

-踩坑點之value字段-

看了網(wǎng)上很多demo都說后臺獲取的數(shù)據(jù)對象必須有value關(guān)鍵字，因為autocomplete只識別value字段，這里有一個實現(xiàn)的小trick：

this.studentBasic= JSON.parse(JSON.stringify(this.list).replace(/studentID/g,"value"));

JSON.stringify() 方法是將一個JavaScript值(對象或者數(shù)組)轉(zhuǎn)換為一個 JSON字符串，如果指定了replacer是一個函數(shù)，則可以替換值，或者如果指定了replacer是一個數(shù)組，可選的僅包括指定的屬性。這樣我們就可以把自己的屬性都替換成value字段啦～cool

總結(jié)

以上所述是小編給大家介紹的Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手