詳解element-ui 組件el-autocomplete使用踩坑記錄
更新時間：2022年03月08日 09:43:47 作者：石耳
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
項目遇到一個比較麻煩的需求，保存用戶填寫的歷史記錄，項目使用的element-ui，自然就使用了el-autocomplete組件，然后就是各種踩坑，以下記錄以下寫代碼過程中遇到的問題
createFilter(queryString, filed) {
console.log("createFilter==" + queryString)
return (item) => {
switch (filed) {
case 'cardNum':
break
case 'cardPass': case 'userPhone': case 'userName': case 'userCardId':
return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
break
case 'mobile':
return (item.phone.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
break
default:
break
}
};
},1、下拉框高度修改：
el-autocomplete組件樣式默認有一個最大高度，超出高度會滾動，如圖顯示的大概有7、8條的數(shù)據(jù)，需求要求展示10條所以只能修改組件樣式。
如圖可以看到有一個max-height屬性，修改這個樣式就可了，但是寫了樣式代碼不起作用,組件修改了:popper-append-to-body="false"之后樣式起作用了，原理不太清楚，哪位大神知道原因的麻煩告訴我一下，多謝
<style scoped lang="less">
/deep/ .inline-input {
/deep/ .el-scrollbar__wrap {
max-height: 360px; /*no*/
}
}
</style>2、一個頁面有多個el-autocomplete組件，所以我需要傳入使用這個組件的字段名，然后修改fetch-suggestions方法為
:fetch-suggestions="((queryString, cb)=>{queryFun(queryString, cb,'userName')})用閉包的方式多傳入一個字段的入?yún)?/p>
<el-form-item label="使用人姓名：" prop="userName" :rules="[{ required: true, message: '請?zhí)顚懶畔ⅲ?,trigger: ['blur', 'change'] },
{ pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/, message: '請?zhí)顚懻_信息！',trigger: ['blur', 'change'] }]">
<!-- <el-input @input="filterInput($event,'userName')" v-model="form.userName" autocomplete="off" maxlength="20"></el-input> -->
<el-autocomplete @blur.stop="saveLocal($event.target.value,'userName')" @input="filterInput($event,'userName')" class="inline-input" v-model="form.userName" :fetch-suggestions="((queryString, cb)=>{queryFun(queryString, cb,'userName')})" placeholder="請輸入姓名" @select="((item)=>{handleSelect(item,'userName')})" :debounce=0 :popper-append-to-body="false">
</el-autocomplete>
?</el-form-item>3、需要保存的數(shù)據(jù)是校驗通過后的數(shù)據(jù)，也就是輸入完成blur之后再操作保存的邏輯，但是el-autocomplete組件blur事件不起作用，后查詢資料說是因為click事件的優(yōu)先級高于blur事件，所以要解決這個問題就解決事件冒泡問題，只需要使用vue的事件修飾符.stop就可以了，????乛?乛????
@blur.stop="saveLocal($event.target.value,'userName')"
queryFun(queryString, cb, filed) {
console.log(filed)
let items = [];
switch (filed) {
case 'cardNum':
break
case 'cardPass':
items = JSON.parse(localStorage.getItem("passHistory")) ? JSON.parse(localStorage.getItem("passHistory")) : [];
break
case 'userPhone':
items = JSON.parse(localStorage.getItem("phoneHistory")) ? JSON.parse(localStorage.getItem("phoneHistory")) : [];
break
case 'userName':
items = JSON.parse(localStorage.getItem("userNameHistory")) ? JSON.parse(localStorage.getItem("userNameHistory")) : [];
break
case 'mobile':
break
case 'userCardId':
items = JSON.parse(localStorage.getItem("userCardIdHistory")) ? JSON.parse(localStorage.getItem("userCardIdHistory")) : [];
break
default:
break
}
let results = queryString ? items.filter(this.createFilter(queryString, filed)) : items;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
}createFilter(queryString, filed) {
console.log("createFilter==" + queryString)
return (item) => {
switch (filed) {
case 'cardNum':
break
case 'cardPass': case 'userPhone': case 'userName': case 'userCardId':
return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
break
default:
break
}
};
},4、第一次點擊的時候會顯示“請?zhí)顚懶畔ⅲ?rdquo;報錯信息，再次點擊選項就正常了，這個問題也是糾結了一陣兒，后來想起我的校驗規(guī)則trigger 寫的是‘blur’，下拉框應該觸發(fā)change事件，修改為
trigger: ['blur', 'change']，解決
handleSelect(item, filed) {
console.log(item);
console.log("handleSelect==" + filed);
let _this = this;
switch (filed) {
case 'cardNum':
break
case 'cardPass': case 'userPhone': case 'userName':
_this.$set(_this.form, filed, item.value);
break
case 'userCardId':
this.form.userCardId = item.userCardId;
this.getAge(item.userCardId);
break
default:
break
}
},5、姓名禁止輸入數(shù)字等使用input事件，將不符合正則的內(nèi)容替換成空，代碼如下
filterInput(e, filed) {
console.log("filterInput=====")
console.log(e)
switch (filed) {
case 'cardNum':
this.form[filed] = e.replace(/[^\a-\z\A-\Z0-9]/g, '');
this.form[filed] = this.form[filed].slice(0, 12);
break
case 'cardPass':
this.form[filed] = e.replace(/[^\a-\z\A-\Z0-9]/g, '');
this.form[filed] = this.form[filed].slice(0, 6);
break
case 'userPhone':
this.form[filed] = e.replace(/[^0-9]/g, '');
this.form[filed] = this.form[filed].slice(0, 11);
break
case 'userName':
this.form[filed] = e.replace(/[^\a-\z\A-\Z\u4e00-\u9fa5]/g, '');
this.form[filed] = this.form[filed].slice(0, 20);
break
case 'mobile':
this.form[filed] = e.replace(/[^0-9]/g, '');
this.form[filed] = this.form[filed].slice(0, 11);
break
case 'userCardId':
this.form[filed] = e.replace(/[^0-9Xx]/g, '');
this.form[filed] = this.form[filed].slice(0, 18);
break
default:
this.form[filed] = e.replace(/[\u4e00-\u9fa5]/g, '');
break
}
// this.saveLocal(this.form[filed], filed)
this.$forceUpdate();
},6、校驗通過后存儲到localStorage，總覺得代碼有點重復，不過改bug比較著急，大神有更好的寫法，歡迎評論區(qū)留言
// 保存驗證通過的信息
saveLocal(val, filed) {
var reg = "";
switch (filed) {
case 'cardNum':
reg = /[0-9a-zA-Z]{12}/;
if (reg.test(val)) {
// 存儲正確卡號到歷史信息
this.cardHistory.unshift({ "cardNum": val });
// 歷史消息去重
var hash = {};
this.cardHistory = this.cardHistory.reduce(function (item, next) {
hash[next.cardNum] ? '' : hash[next.cardNum] = true && item.push(next);
return item
}, []);
if (this.cardHistory.length > 10) {
this.cardHistory.pop();
}
localStorage.setItem("cardList", JSON.stringify(this.cardHistory));
}
break
case 'cardPass':
reg = /[0-9a-zA-Z]{6}/;
if (reg.test(val)) {
// 存儲正確卡號到歷史信息
this.passHistory.unshift({ "value": val });
// 歷史消息去重
var hash = {};
this.passHistory = this.passHistory.reduce(function (item, next) {
hash[next.value] ? '' : hash[next.value] = true && item.push(next);
return item
}, []);
if (this.passHistory.length > 10) {
this.passHistory.pop();
}
localStorage.setItem("passHistory", JSON.stringify(this.passHistory));
}
break
case 'userPhone':
reg = /^1[3-9]\d{9}$/;
if (reg.test(val)) {
// 存儲正確卡號到歷史信息
this.phoneHistory.unshift({ "value": val });
// 歷史消息去重
var hash = {};
this.phoneHistory = this.phoneHistory.reduce(function (item, next) {
hash[next.value] ? '' : hash[next.value] = true && item.push(next);
return item
}, []);
if (this.phoneHistory.length > 10) {
this.phoneHistory.pop();
}
localStorage.setItem("phoneHistory", JSON.stringify(this.phoneHistory));
}
break
case 'userName':
reg = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/;
if (reg.test(val)) {
// 存儲正確卡號到歷史信息
this.userNameHistory.unshift({ "value": val });
// 歷史消息去重
var hash = {};
this.userNameHistory = this.userNameHistory.reduce(function (item, next) {
hash[next.value] ? '' : hash[next.value] = true && item.push(next);
return item
}, []);
if (this.userNameHistory.length > 10) {
this.userNameHistory.pop();
}
localStorage.setItem("userNameHistory", JSON.stringify(this.userNameHistory));
}
break
case 'mobile':
break
case 'userCardId':
reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if (reg.test(val)) {
// 存儲正確卡號到歷史信息
this.userCardIdHistory.unshift({ "value": val });
// 歷史消息去重
var hash = {};
this.userCardIdHistory = this.userCardIdHistory.reduce(function (item, next) {
hash[next.value] ? '' : hash[next.value] = true && item.push(next);
return item
}, []);
if (this.userCardIdHistory.length > 10) {
this.userCardIdHistory.pop();
}
localStorage.setItem("userCardIdHistory", JSON.stringify(this.userCardIdHistory));
}
break
default:
break
}
},到此這篇關于詳解element-ui 組件el-autocomplete使用踩坑記錄的文章就介紹到這了,更多相關element組件el-autocomplete使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
插槽（slot）是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時，把不確定的、希望由用戶指定的部分定義為插槽?？梢园巡宀壅J為是組件封裝期間，為用戶預留的內(nèi)容的占位符2022-09-09
這篇文章主要介紹了vue計算屬性computed方法內(nèi)傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue如何調(diào)用接口請求頭增加參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
關于在vscode使用webpack指令顯示"因為在此系統(tǒng)中禁止運行腳本"問題(完美解決)
這篇文章主要介紹了解決在vscode使用webpack指令顯示"因為在此系統(tǒng)中禁止運行腳本"問題,本文給大家分享完美解決方法，需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue.js實現(xiàn)條件渲染的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關于如何基于Vue-cli快速搭建項目的完整步驟，文中通過示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue-cli(vue腳手架方式搭建),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue3+springboot部署到Windows服務器的詳細步驟
這篇文章主要介紹了vue3+springboot部署到Windows服務器,配置Nginx時，因為現(xiàn)在是把vue前端交給了Nginx代理，所以這里的端口號不一定是我們在vue項目中設置的端口號，本文給大家介紹的非常詳細，需要的朋友參考下吧2022-10-10