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

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

时间：2018-09-06 01:52:24

前言：

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}