关键字搜索功能

效果展示:

1输入关键字,页面自动展示包含关键字的信息

在这里插入图片描述
分析:搜索框输入关键字——在四列内容中匹配——选中匹配到的整项数据——所有选中数据作为table的data


代码:

html

<el-input
  type="search"
  v-model="searchValue"
  placeholder="请输入关键字"
  clearable="">
   <i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-table :data="tableDataFiltered">
</el-table>
   clearable=""//有输入后可一键清除 

在这里插入图片描述

 tableDataFiltered//页面table的数据源

JS中
data

data() {
    return {
    searchValue:"",
    }
}

computed{}

tableDataFiltered() {
      let res = this.tableData
      let resultArray=[]
      //模糊查询,支持机型、机号、呼号的查询
     if (this.searchValue) {
        for(let i in res){
          if(new RegExp(`.*${this.searchValue}.*`).test(res[i].name)){
            resultArray.push(res[i])
          }
          if(new RegExp(`.*${this.searchValue}.*`).test(res[i].lon)){
            resultArray.push(res[i])
          }
          if(new RegExp(`.*${this.searchValue}.*`).test(res[i].lat)){
            resultArray.push(res[i])
          }
           if(new RegExp(`.*${this.searchValue}.*`).test(res[i].creator)){
            resultArray.push(res[i])
          }
        }
      }else{
         resultArray=res
      }
      return  resultArray
    },

computed是计算属性的,值一变化就做处理



版权声明:本文为weixin_42419575原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。