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


Posted in Javascript onMay 28, 2019

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

一、实现思路

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
    }
  }

三、总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
JS前端加密算法示例
Dec 22 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
原生js实现日历效果
Mar 02 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 #Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 #Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 #Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 #Javascript
Vue实现搜索结果高亮显示关键字
May 28 #Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 #Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
You might like
DC动漫人物排行
2020/03/03 欧美动漫
php中static静态变量的使用方法详解
2010/06/04 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php检测文本的编码
2015/07/26 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
python实现ID3决策树算法
2017/12/20 Python
python 识别图片中的文字信息方法
2018/05/10 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python实现在线翻译功能
2020/03/03 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Python random模块的使用示例
2020/10/10 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
自我鉴定三原则
2014/01/13 职场文书
卖车协议书
2014/04/21 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
奖学金感谢信
2015/01/21 职场文书
校车司机安全责任书
2015/05/11 职场文书
电影建党伟业观后感
2015/06/01 职场文书
公司年会主持词范文!
2019/05/07 职场文书
情况说明书格式及范文
2019/06/24 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL