您好,登錄后才能下訂單哦!
本文實例為大家分享了vue實現(xiàn)Input輸入框模糊查詢方法的具體代碼,供大家參考,具體內(nèi)容如下
原理:原生js的indexOf() 方法,該方法將從頭到尾地檢索數(shù)組,看它是否含有對應(yīng)的元素。開始檢索的位置在數(shù)組 start 處或數(shù)組的開頭(沒有指定 start 參數(shù)時)。如果找到一個 item,則返回 item 的第一次出現(xiàn)的位置。開始位置的索引為 0。
如果在數(shù)組中沒找到指定元素則返回 -1。
下面先看示例:
搜索前:
搜索后:
實現(xiàn)方法:
methods:{ // 點擊搜索工程 search(){ // 支持模糊查詢 // this.xmgcqkJsonsData:用于搜索的總數(shù)據(jù) // toLowerCase():用于把字符串轉(zhuǎn)為小寫,讓模糊查詢更加清晰 let _search = this.jobNo.toLowerCase(); let newListData = []; // 用于存放搜索出來數(shù)據(jù)的新數(shù)組 if (_search) { this.xmgcqkJsonsData.filter(item => { if (item.code.toLowerCase().indexOf(_search) !== -1) { newListData.push(item); } }) } this.xmgcqkJsonsData = newListData; // console.log(‘新數(shù)組',newListData) }, }
以上方法是根據(jù) 工單號/流水號 進(jìn)行查詢的,如果在當(dāng)前基礎(chǔ)上增加對其它條件的搜索,比如 項目/工程名稱,那只需要在原來的代碼上增加一個判斷條件即可,如:
if (item.code.toLowerCase().indexOf(_search) !== -1 || item.name.toLowerCase().indexOf(_search) !== -1) { newListData.push(item); }
這就是如何實現(xiàn)vue input輸入框模糊查詢的方法。
更多教程點擊《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請大家點擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。