// 筛选变色

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. docker学习笔记(6)——docker场景问题汇总(centos7 由于内核版本低带来的一系列问题,docker彻底卸载,安装、启动日志报错分析)

    参考资料: https://nachuan.blog.csdn.net/article/details/96041277 https://www.cnblogs.com/xzkzzz/p/962765 ...

  2. [手写系列] 带你实现一个简单的Promise

    简介 学习之前 需要先对Promise有个基本了解哦,这里都默认大家都是比较熟悉Promise的 本次将带小伙伴们实现Promise的基本功能 Promise的基本骨架 Promise的then Pr ...

  3. 一个更好用的.NET Core程序瘦身器,减小程序尺寸到1/3

    一.为什么要开发.NET Core程序瘦身器? .NET Core具有[剪裁未使用的代码]的功能,但是由于它是使用静态分析来实现的,因此它的剪裁效果并不是最优的.它有如下两个缺点: 不支持Window ...

  4. 【Java分享客栈】一个包装过简历的新同事写完微信支付引起事故后果断离职了

    前言 挺长时间没发文了,因为公司有一个紧急项目要赶进度,加班如吃饭喝水,久违的进入到码农的状态. 之所以抽空来发个文,是这个项目才刚上线,时间不长却因为一位新同事的代码引起了生产环境的事故,造成了一批 ...

  5. C#/VB.NET 将Html转为Excel

    本文介绍通过C#和VB.NET代码展示将Html转为Excel文档的方法. dll引用 方法1 将 Spire.XLS for .NET 下载到本地,解压,安装.完成安装后,在安装路径下找到BIN文件 ...

  6. 2022年官网下安装Studio 3T最全版与官网查阅方法(无需注册下载版)

    目录 一.环境 1.构建工具(参考工具部署方式) 2.保持启动 二.下载安装 1.百度搜索,或者访问官网:https://robomongo.org/,选择下载进入下载页. 2.进入下载页,选择如下下 ...

  7. WPF中Enter 焦点转移方法

    1.Set the TabIndex="16"2. private void detailGrid_Keydown(object sender, KeyEventArgs e) { ...

  8. Docker——概述

    出现原因:开发接替运维的工作,将jar包连同(mysql,jdk)等环境上线 实现:java -> jar(环境) -> 打包项目带上环境(镜像) -> (Docker仓库:商店) ...

  9. VMware安装win7后,安装VMware Tools时报错安装程序无法继续。本程序需要您将此虚拟机上安装的操作系统更新到SP1

    具体报错: 倘若你用的是这样的镜像:cn_windows_7_enterprise_x64_dvd_x15-70741.iso 换镜像源.换镜像源.换镜像源! 换成带sp1的iso镜像:cn_wind ...

  10. Python的安装教程与环境配置

    安装环境:Windows7或者Windows10 Python版本:最新即可,这里选用 python 3.7.2: 一.下载:在python的官网下载python版本,需要下载对应版本(在计算机-属性 ...