vue+Element实现搜索关键字高亮功能

最近做了一个日志搜索的需求，要在页面上实现海量日志的关键字搜索。为了搜索更清晰，我最终实现了多条件搜索，且搜索结果的记录中的关键字全部高亮。

一、实现思路

1 实时监控表格，实现关键字的定位；

2 点击搜索按钮以后，实现记录中关键字的样式变化（即高亮）。

二、实现过程

1 搜索条件表单

了解了实现思路，就让我们一起来看一下实现过程（关键位置均给了注释）

<el-form :inline="true" :model="formquery" >
  <el-row>
  <el-col :span="8">
   <el-form-item label="日志编码" >
   <el-input v-model="formquery.querymessage1" ></el-input>
   </el-form-item>
   </el-col>
   <el-col :span="8" >
   <el-form-item label="日志编码2">
   <el-input v-model="formquery.querymessage2" ></el-input>
   </el-form-item>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="20">
   <el-form-item label="日志编码3">
   <el-input v-model="formquery.querymessage3" ></el-input> </el-form-item>
   </el-col>
   <el-col :span="4">
   <el-form-item>
   <el-button @click="loaddata()" >查询</el-button>
   </el-form-item>
   </el-col>
  </el-row>
</el-form>

2 表格部分

<el-table :fit="true" ref="loginfosdata" max-height="700" :data="loginfosdata"
  element-loading-text="loading" :highlight-current-row="true"
   size="mini" >
  <el-table-column prop="_source.message" :label="$t('loginformation')" sortable >
    <template slot-scope="scope">
    <span v-html="showdata(message)"
      == <!--注意此处的写法,该函数showdata返回的结果是一段html代码，在这里是直接进行填充，填充的内容是修改了关键字样式以后的内容。-->==
      ></span>
     </template>
    </el-table-column>
</el-table>

3.实时监听表格

computed:{
  // 实时监听表格
  tables: function() {
   const search = this.listquery.querymessage||this.listquery.querymessage2||this.listquery.querymessage3
   if (search) {
    return this.loginfosdata.filter(datanews => {
     return object.keys(datanews).some(key => {
      return string(datanews[key]).tolowercase().indexof(search) > -1
     })
    })
   }
   return this.tabledata
  }
 }

4.修改关键字样式

// 筛选变色
  showdata(val) {
   val = val + '';
   if (this.checkpara(val,this.listquery.querymessage)||this.checkpara(val,this.listquery.querymessage2)
    ||this.checkpara(val,this.listquery.querymessage3)) {
    //如果搜索结果记录包含关键字中的任何一个，那么修改样式
    return val.replace(this.listquery.querymessage'<font color="#409eff">' + this.listquery.prodcd + '</font>')
     .replace(this.listquery.querymessage2, '<font color="#409eff">' + this.listquery.querymessage3 + '</font>')
     
   } else {
    return val //不做任何修改
   }
  },
  //判断搜索记录是否包含某个关键字
  checkpara(val,para){
    if (val.indexof(para) !== -1 && para !== ''){
     return true;
    }else {
     return false
    }
  }

三、总结

实现以后会觉得思路很简单。其实任何一个多么复杂的需求，只要在做之前，理清思路，分成一个个小的实现过程，那么就自然很简单，而且效率也很高。这也是我的真切感受。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。