// 筛选变色

brightenKeyword(val, keyword) {
val = val + '';
if (val.indexOf(keyword) !== -1 && keyword !== '') {
return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
} else {
return val
}
}

// 使用方法

<el-table-column label="维护内容">
<template slot-scope="scope">
<span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
</template>
</el-table-column>

开源项目地址: https://github.com/alex-0407/...

效果演示


更多angular1/2/4/5、ionic1/2/3/4、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请扫一扫下面的二维码关注微信公众号——全栈弄潮儿


福利专区:扫码关注,免费领取淘宝天猫内部优惠券

vue2实现搜索结果中的搜索关键字高亮的更多相关文章

  1. 用Java实现自动打开浏览器在搜索框中进行搜索

    主要使用了Java的剪切板操作和Robot类 上代码: package pers.jeaven.AutoRobot.main; import java.awt.Desktop; import java ...

  2. angular2 pipe实现搜索结果中的搜索关键字高亮

    效果图如下 1.声明一个pipe import {Pipe, Injectable, PipeTransform} from '@angular/core';import { DomSanitizer ...

  3. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

  4. 在stream流和byte[]中查找(搜索)指定字符串

    在 stream流 和 byte[] 中查找(搜索)指定字符串 这里注重看的是两个 Search 的扩展方法,一个是 stream 类型的扩展,另一个是 byte[] 类型的扩展, 如果大家有更好的“ ...

  5. linux 中的搜索命令

    which 查看可执行文件的位置. whereis 查看文件位置. locate 配合数据库查看文件位置. find 实际搜索硬盘查询文件名称. grep 查找文件内容 一般不常用find命令,因为f ...

  6. MWeb for Mac使用教程-如何在文档库中快速搜索

    使用MWeb for Mac专业的 Markdown 编辑写作软件,可以让你随时记录自己的想法,灵感,创意,为您的工作节省宝贵的时间.本篇文章带来的是MWeb for Mac如何在文档库中快速搜索使用 ...

  7. 详细解读Android中的搜索框(四)—— Searchable配置文件

    <?xml version="1.0" encoding="utf-8"?> <searchable xmlns:android=" ...

  8. 详细解读Android中的搜索框(二)—— Search Dialog

    Search Dialog是提供搜索的控件之一,还有一个是上次小例子给出的searchView,关于SearchView的东西后面会说到.本次先从Search Dialog说起,让大家慢慢理解andr ...

  9. 百度搜索URL中的参数都是什么

    最近,点石排名更新了一个新功能——站内搜索.其实理解起来也很简单,就是通过URL限定搜索结果为某个网站,从而参与点击(例如:https://www.baidu.com/s?wd=SEO&si= ...

随机推荐

  1. k8s全方位监控 -prometheus实现短信告警接口编写(python)

    1.prometheus短信告警接口实现(python)源码如下: import subprocess from flask import Flask from flask import reques ...

  2. JZ-048-不用加减乘除做加法

    不用加减乘除做加法 题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 题目链接: 不用加减乘除做加法 代码 /** * 标题:不用加减乘除做加法 * 题目描述 ...

  3. LeetCode-093-复原 IP 地址

    复原 IP 地址 题目描述:给定一个只包含数字的字符串,用以表示一个 IP 地址,返回所有可能从 s 获得的 有效 IP 地址 .你可以按任何顺序返回答案. 有效 IP 地址 正好由四个整数(每个整数 ...

  4. 如何使用 VS Code 远程连接矩池云主机

    Visual Studio Code(以下简称 VS Code)是一个由微软开发的代码编辑器.VS Code 支持代码补全.代码片段.代码重构.Git 版本控制等功能. VS Code 现已支持连接远 ...

  5. source insight新建工程

    1.打开Source Insight.如果已经打开过项目,则选择Project->Close Project.然后点击Project->New Project: 2.在弹出界面填入项目名 ...

  6. C# WinForm 解决子窗体放大后,子窗体图标放大的问题

    解决子窗体放大后,子窗体的图标占用主窗体的菜单栏的问题. C#子窗体最大化时, 那个图标跑到主窗体的前面去了, 造成界面不统一也不美观. 所以需要进行处理, 只要有主窗体的菜单ItemAdded事件中 ...

  7. 一个简单的模拟实例说明Task及其调度问题

    Task对于.NET的重要性毋庸置疑.通过最近的一些面试经历,发现很多人对与Task及其调度机制,以及线程和线程池之间的关系并没有清晰的认识.本文采用最简单的方式模拟了Task的实现,旨在说明Task ...

  8. CF1486X Codeforces Round #703

    C2 Guessing the Greatest (二分+构造) 题目大意:交互题,每次可以询问一个子区间次大值的位置,最多询问20次,问全局最大值的位置.n=1e5 40次的情况大力二分,20次需要 ...

  9. XML技术的作用?

    XML技术用于数据存储.信息配置.数据交换三方面. 可以将数据存储在XML中,通过节点.元素内容.属性标示数据内容及关系. 可以使用XML很方便的做信息配置,软件的各种配置参数和对象关系都存贮在XML ...

  10. Spring Boot 的配置文件有哪几种格式?它们有什么区别?

    .properties 和 .yml,它们的区别主要是书写格式不同.    1).properties    app.user.name = javastack    2).yml    app:   ...