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入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
浅析创建javascript对象的方法
May 13 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 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
PHP中的串行化变量和序列化对象
2006/09/05 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python列表对象实现原理详解
2019/07/01 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
小学教师管理制度
2014/01/18 职场文书
工作迟到检讨书
2014/02/21 职场文书
学校校庆演讲稿
2014/05/22 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
大学生毕业个人总结
2015/02/15 职场文书
关于五一放假的通知
2015/08/18 职场文书
z-index不起作用
2021/03/31 HTML / CSS
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
Redis 限流器
2022/05/15 Redis