詳解element-ui 組件el-autocomplete使用踩坑記錄
項(xiàng)目遇到一個(gè)比較麻煩的需求,保存用戶填寫的歷史記錄,項(xiàng)目使用的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組件樣式默認(rèn)有一個(gè)最大高度,超出高度會(huì)滾動(dòng),如圖顯示的大概有7、8條的數(shù)據(jù),需求要求展示10條所以只能修改組件樣式。
如圖可以看到有一個(gè)max-height屬性,修改這個(gè)樣式就可了,但是寫了樣式代碼不起作用,組件修改了:popper-append-to-body="false"之后樣式起作用了,原理不太清楚,哪位大神知道原因的麻煩告訴我一下,多謝
<style scoped lang="less"> /deep/ .inline-input { /deep/ .el-scrollbar__wrap { max-height: 360px; /*no*/ } } </style>
2、一個(gè)頁面有多個(gè)el-autocomplete組件,所以我需要傳入使用這個(gè)組件的字段名,然后修改fetch-suggestions方法為
:fetch-suggestions="((queryString, cb)=>{queryFun(queryString, cb,'userName')})
用閉包的方式多傳入一個(gè)字段的入?yún)?/p>
<el-form-item label="使用人姓名:" prop="userName" :rules="[{ required: true, message: '請(qǐng)?zhí)顚懶畔ⅲ?,trigger: ['blur', 'change'] }, { pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/, message: '請(qǐng)?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="請(qǐng)輸入姓名" @select="((item)=>{handleSelect(item,'userName')})" :debounce=0 :popper-append-to-body="false"> </el-autocomplete> ?</el-form-item>
3、需要保存的數(shù)據(jù)是校驗(yàn)通過后的數(shù)據(jù),也就是輸入完成blur之后再操作保存的邏輯,但是el-autocomplete組件blur事件不起作用,后查詢資料說是因?yàn)閏lick事件的優(yōu)先級(jí)高于blur事件,所以要解決這個(gè)問題就解決事件冒泡問題,只需要使用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、第一次點(diǎn)擊的時(shí)候會(huì)顯示“請(qǐng)?zhí)顚懶畔ⅲ?rdquo;報(bào)錯(cuò)信息,再次點(diǎn)擊選項(xiàng)就正常了,這個(gè)問題也是糾結(jié)了一陣兒,后來想起我的校驗(yàn)規(guī)則trigger 寫的是‘blur’,下拉框應(yīng)該觸發(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、校驗(yàn)通過后存儲(chǔ)到localStorage,總覺得代碼有點(diǎn)重復(fù),不過改bug比較著急,大神有更好的寫法,歡迎評(píng)論區(qū)留言
// 保存驗(yàn)證通過的信息 saveLocal(val, filed) { var reg = ""; switch (filed) { case 'cardNum': reg = /[0-9a-zA-Z]{12}/; if (reg.test(val)) { // 存儲(chǔ)正確卡號(hào)到歷史信息 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)) { // 存儲(chǔ)正確卡號(hào)到歷史信息 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)) { // 存儲(chǔ)正確卡號(hào)到歷史信息 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)) { // 存儲(chǔ)正確卡號(hào)到歷史信息 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)) { // 存儲(chǔ)正確卡號(hào)到歷史信息 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 } },
到此這篇關(guān)于詳解element-ui 組件el-autocomplete使用踩坑記錄的文章就介紹到這了,更多相關(guān)element組件el-autocomplete使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue計(jì)算屬性computed方法內(nèi)傳參方式
這篇文章主要介紹了vue計(jì)算屬性computed方法內(nèi)傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)
這篇文章主要介紹了Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01關(guān)于在vscode使用webpack指令顯示"因?yàn)樵诖讼到y(tǒng)中禁止運(yùn)行腳本"問題(完美解決)
這篇文章主要介紹了解決在vscode使用webpack指令顯示"因?yàn)樵诖讼到y(tǒng)中禁止運(yùn)行腳本"問題,本文給大家分享完美解決方法,需要的朋友可以參考下2021-07-07vue.js實(shí)現(xiàn)條件渲染的實(shí)例代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)條件渲染的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動(dòng)態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動(dòng)態(tài)添加li的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue3+springboot部署到Windows服務(wù)器的詳細(xì)步驟
這篇文章主要介紹了vue3+springboot部署到Windows服務(wù)器,配置Nginx時(shí),因?yàn)楝F(xiàn)在是把vue前端交給了Nginx代理,所以這里的端口號(hào)不一定是我們?cè)趘ue項(xiàng)目中設(shè)置的端口號(hào),本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2022-10-10