关键字搜索功能

效果展示：

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是计算属性的，值一变化就做处理

---