前言：

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

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

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

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

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

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

---

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

// 數(shù)組長度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ù)組的新的第一個 判斷 ，因為每次都把第一個刪除this.AccountData.push(this.AccountData[0])this.AccountData.shift() }else{this.AccountData.shift() }}

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

然后通過兩個方法 ：? push 和 shift?

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

判斷是否為空

使用 正則表達(dá)式 對輸入內(nèi)容進(jì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})// 這個 是我放在 create（）中 的請求數(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é) 測試 代碼邏輯性 通過// if( this.AccountData[0].ArticleSummary.includes(this.searchText)){// console.log(this.AccountData[i])// 下標(biāo)為零表示 從 數(shù)組的新的第一個 判斷 ，因為每次都把第一個刪除this.AccountData.push(this.AccountData[0])this.AccountData.shift() }else{this.AccountData.shift() }}}},// 通過正則驗證輸入 是否為空check(string){var content = stringif(content.replace(/(^\s*)|(\s*$)/g, "") == '')return true}

注意問題

在我 最開始 實(shí)現(xiàn) 上面代碼的時候因為邏輯問題出現(xiàn)過錯誤 ，?另一篇文章

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

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

---

文章如有錯誤，懇請大家提出問題，本人不勝感激 。 不懂的地方可以評論，我都會一一回復(fù)

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

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

總結(jié)

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

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