前言：

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

我這里沒有 使用官方文檔的方法 ，我是通過使用兩個操作數組的方法來實現搜索功能的

實現代碼：

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

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

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

---

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

// 數組長度const length = this.AccountData.lengthfor(var i = 0 ; i < length ; i++){// console.log(this.AccountData[i])if( this.AccountData[0].ArticleTitle.includes(this.searchText)){// 下標為零表示 從 數組的新的第一個 判斷 ，因為每次都把第一個刪除this.AccountData.push(this.AccountData[0])this.AccountData.shift() }else{this.AccountData.shift() }}

每次循環都是取下標為? 0? 的元素判斷 是否 帶有輸入框輸入的數據

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

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

判斷是否為空

使用 正則表達式 對輸入內容進行檢測，判斷 是否為空 （空格或者無輸入）

// 通過正則驗證輸入 是否為空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（）中 的請求數據的函數this.GetDetails() }else{const length = this.AccountData.lengthfor(var i = 0 ; i < length ; i++){// console.log(this.AccountData[i])// 文章標題 titleif( this.AccountData[0].ArticleTitle.includes(this.searchText)){// 文章總結 測試 代碼邏輯性 通過// if( this.AccountData[0].ArticleSummary.includes(this.searchText)){// console.log(this.AccountData[i])// 下標為零表示 從 數組的新的第一個 判斷 ，因為每次都把第一個刪除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}

注意問題

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

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

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

---

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。