前言：

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 添加搜索框实现简单搜索功能，同时判断输入是否为空相关推荐

Android中MaterialSearchView(搜索框)的简单实用
Android中MaterialSearchView(搜索框)的简单实用收搜框架有好多,动画效果满炫酷的就是代码太多,没发抽取他的搜索功能,而这个却比较好用些,直接从代码里面抠出来一个简单实现搜索功 ...
android自定义搜索栏,Android自定义View实现搜索框（SearchView）功能
概述在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚在某些情况下,我们希望我们的自 ...
python字典实现关键字检索_如何实现搜索框的关键词提示功能
我们都使用过主流的搜索引擎,谷歌. bing,当然还有搜狗.百度之类.当你搜索某一关键词时,它会贴心在下拉框补全一些热门关键词,像下图这样: 搜索关键词提示你点击某一关键词,页面就直接跳转到结果页面 ...
EasyUI中搜索框的简单使用
场景基本搜索框流式搜索框搜索框类别实现基本搜索框 <!DOCTYPE html> <html lang="en"> <head>< ...
百度搜索结果的URL参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. 百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2) 名称 rsv_ ...
百度搜索引擎结果网址参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. [b]百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2)[/b] ...
百度搜索结果页面的参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. 百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2) 名称 rsv_ ...
直播网站程序源码，搜索框实现快速搜索功能
直播网站程序源码,搜索框实现快速搜索功能 module.exports = async function (params, context) {const db = context.databasec ...
有历史搜索记录的搜索框（百度搜索案例）
带有历史搜索词条的搜索框记录一下带有历史搜索词条的搜索框,具体效果类似百度搜索: 点击搜索框展示历史搜索词条列表: 点击搜索框以外的区域隐藏历史搜索词条列表: 点击删除除去对应词条. 效果图: ...

vue 使用 el-table 添加搜索框实现简单搜索功能，同时判断输入是否为空

前言：

实现代码：

判断是否为空

完整代码

注意问题

vue 使用 el-table 添加搜索框实现简单搜索功能，同时判断输入是否为空相关推荐

最新文章

热门文章

vue 使用 el-table 添加搜索框 实现简单搜索功能 ，同时判断输入是否为空

前言：

实现代码：

判断是否为空

完整代码

注意问题

vue 使用 el-table 添加搜索框 实现简单搜索功能 ，同时判断输入是否为空相关推荐

最新文章

热门文章

vue 使用 el-table 添加搜索框实现简单搜索功能，同时判断输入是否为空

vue 使用 el-table 添加搜索框实现简单搜索功能，同时判断输入是否为空相关推荐