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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
使用Python读取大文件的方法
2018/02/11 Python
Python错误处理操作示例
2018/07/18 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
毕业生自荐信
2013/12/14 职场文书
美术毕业生求职信
2014/02/25 职场文书
法律专业求职信
2014/05/24 职场文书
任命书怎么写
2014/06/04 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
教师见习报告范文
2014/11/03 职场文书
离婚起诉书范本
2015/05/18 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
电频谱管理的原则是什么
2022/02/18 无线电