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的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
vue.js实现双击放大预览功能
Jun 23 Javascript
js实现随机点名功能
Dec 23 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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python解惑之True和False详解
2017/04/24 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
移风易俗倡议书
2014/04/15 职场文书
《春雨》教学反思
2014/04/24 职场文书
迎新生欢迎词
2015/01/23 职场文书
委托书格式要求
2015/01/28 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript