前言：

vue 項(xiàng)目 使用?el-table?，想給 表格上方添加搜索功能 ，雖然 element 官方文檔 自帶類似的搜索框

我這里沒(méi)有 使用官方文檔的方法 ，我是通過(guò)使用兩個(gè)操作數(shù)組的方法來(lái)實(shí)現(xiàn)搜索功能的

實(shí)現(xiàn)代碼：

通過(guò) ?@keyup.enter.native="xxx"? 給輸入框定義 搜索 函數(shù)（這里是按下回車才觸發(fā)函數(shù)）

<el-inputv-model="searchText"placeholder="請(qǐng)輸入文章標(biāo)題按下回車進(jìn)行搜索"style="width:300px;float:right"size="small"@keyup.enter.native="search"></el-input>

? 輸入框通過(guò) v-model 與 數(shù)據(jù)雙向綁定 ，再傳入函數(shù)中 做判斷

---

表格渲染的數(shù)據(jù)是通過(guò) axios 請(qǐng)求保存在數(shù)組中 ，我先 定義變量拿到數(shù)組的長(zhǎng)度 ，然后遍歷數(shù)組

// 數(shù)組長(zhǎng)度const length = this.AccountData.lengthfor(var i = 0 ; i < length ; i++){// console.log(this.AccountData[i])if( this.AccountData[0].ArticleTitle.includes(this.searchText)){// 下標(biāo)為零表示 從 數(shù)組的新的第一個(gè) 判斷 ，因?yàn)槊看味及训谝粋€(gè)刪除this.AccountData.push(this.AccountData[0])this.AccountData.shift() }else{this.AccountData.shift() }}

每次循環(huán)都是取下標(biāo)為? 0? 的元素判斷 是否 帶有輸入框輸入的數(shù)據(jù)

然后通過(guò)兩個(gè)方法 ：? push 和 shift?

每次滿足條件的添加（push）到數(shù)組尾部 ， 然后 每次循環(huán)都把數(shù)組首個(gè)元素刪除（shift） ，以此類推 ，由于循環(huán)次數(shù)是 數(shù)組的長(zhǎng)度 ，所以每個(gè)元素都會(huì)循環(huán)一次 ，這種方法符合機(jī)器思想

判斷是否為空

使用 正則表達(dá)式 對(duì)輸入內(nèi)容進(jìn)行檢測(cè)，判斷 是否為空 （空格或者無(wú)輸入）

// 通過(guò)正則驗(yàn)證輸入 是否為空check(string){var content = stringif(content.replace(/(^\s*)|(\s*$)/g, "") == '')return true}

?完整代碼

// 搜索 search(){if(this.check(this.searchText)){this.$message({type:'error',message:'輸入為空',duration:1000,offset:200})// 這個(gè) 是我放在 create（）中 的請(qǐng)求數(shù)據(jù)的函數(shù)this.GetDetails() }else{const length = this.AccountData.lengthfor(var i = 0 ; i < length ; i++){// console.log(this.AccountData[i])// 文章標(biāo)題 titleif( this.AccountData[0].ArticleTitle.includes(this.searchText)){// 文章總結(jié) 測(cè)試 代碼邏輯性 通過(guò)// if( this.AccountData[0].ArticleSummary.includes(this.searchText)){// console.log(this.AccountData[i])// 下標(biāo)為零表示 從 數(shù)組的新的第一個(gè) 判斷 ，因?yàn)槊看味及训谝粋€(gè)刪除this.AccountData.push(this.AccountData[0])this.AccountData.shift() }else{this.AccountData.shift() }}}},// 通過(guò)正則驗(yàn)證輸入 是否為空check(string){var content = stringif(content.replace(/(^\s*)|(\s*$)/g, "") == '')return true}

注意問(wèn)題

在我 最開始 實(shí)現(xiàn) 上面代碼的時(shí)候因?yàn)檫壿媶?wèn)題出現(xiàn)過(guò)錯(cuò)誤 ，?另一篇文章

1.我的代碼是?直接操作原數(shù)組 ，是因?yàn)?數(shù)據(jù)量比較少 ，大家在進(jìn)行這樣的操作可以定義一個(gè)新數(shù)組拷貝全部的數(shù)據(jù)進(jìn)行操作，這樣會(huì)方便后期的 維護(hù)和改錯(cuò)?

2. 上面是搜索功能 是通過(guò) 鍵盤按下回車觸發(fā)函數(shù) （keyup.enter.native="xxx"?），這里可以根據(jù)自己的需求進(jìn)行更改，比如 鍵盤按下就自動(dòng)觸發(fā)?等等。。。

---

文章如有錯(cuò)誤，懇請(qǐng)大家提出問(wèn)題，本人不勝感激 。 不懂的地方可以評(píng)論，我都會(huì)一一回復(fù)

文章對(duì)大家有幫助的話，希望大家能動(dòng)手點(diǎn)贊鼓勵(lì)，大家未來(lái)一起努力 ? ? 長(zhǎng)路漫漫，道阻且長(zhǎng)

??轉(zhuǎn)載請(qǐng)注明出處：https://blog.csdn.net/qq_52855464/article/details/125344962

總結(jié)

以上是生活随笔為你收集整理的vue 使用 el-table 添加搜索框 实现简单搜索功能 ，同时判断输入是否为空的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。