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

潮汐未见潮落

已于 2022-06-19 09:11:26 修改

阅读量1w

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-06-18 14:22:15 首次发布

本文链接：https://blog.csdn.net/qq_52855464/article/details/125344962

版权

vue 专栏收录该内容

47 篇文章 5 订阅

订阅专栏

前言：

vue 项目使用 el-table ，想给表格上方添加搜索功能，虽然 element 官方文档自带类似的搜索框

我这里没有使用官方文档的方法，我是通过使用两个操作数组的方法来实现搜索功能的

实现代码：

通过 @keyup.enter.native="xxx" 给输入框定义搜索函数（这里是按下回车才触发函数）

          <el-input
               v-model="searchText"
              placeholder="请输入文章标题按下回车进行搜索"
              style="width:300px;float:right"
              size="small"
               @keyup.enter.native="search"
          ></el-input>

输入框通过 v-model 与数据双向绑定，再传入函数中做判断

表格渲染的数据是通过 axios 请求保存在数组中，我先定义变量拿到数组的长度，然后遍历数组

          // 数组长度
            const length = this.AccountData.length
          for(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 = string
      if(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.length
          for(var i = 0 ; i < length ; i++){
            // console.log(this.AccountData[i])
            // 文章标题  title
            if( 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 = string
      if(content.replace(/(^\s*)|(\s*$)/g, "") == '')
      return true
    }