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>

标题名称：vue+Element实现搜索关键字高亮功能-创新互联
文章链接：https://www.cdcxhl.com/article8/shoip.html

成都网站建设公司_创新互联，为您提供网站建设、App设计、网站收录、商城网站、建站公司、域名注册

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联