vue + element table 实现搜索关键字高亮展示

本文主要用来记录实现搜索功能后 如何高亮显示关键字，不介绍搜索功能的实现，文末附带的参考连接有更为详细的介绍，有需要的同学可以进行参考

// 搜索框
<div @keyup.enter="search">    <el-input:placeholder="请输入搜索内容"prefix-icon="el-icon-search"v-model.trim="searchData"></el-input>
</div>

// 表格
<el-table :data="searchTableDate" height="auto" style="width: 99%; margin: auto"><el-table-column type="index" width="50"> </el-table-column><el-table-column prop="name" :label="文件名"><template slot-scope="scope">// 核心<span  v-html="showData(scope.row.name, searchData)"></span></template></el-table-column>
</el-table>

// 替换关键字
public showData(val, searchData) {// 不区分大小写  const Reg = new RegExp(searchData, 'i');// 全局替换  const Reg = new RegExp(searchData, 'g');const Reg = new RegExp(searchData, 'ig');if (val) {// 注意 这里推荐使用正则占位符$& 不使用${searchData}  因为当这里使用正则表达式（i）不区分大小写时，如果你的文本是大写，搜索的关键字是小写，匹配结果会替换掉大写的文本// const res = val.replace(Reg, `<span style="background-color: yellow;">${searchData}</span>`);const res = val.replace(Reg, `<span style="background-color: yellow;">$&</span>`);return res;}
}

参考文章：
搜索文字并高亮定位显示
特殊正则表达式

vue + element table 实现搜索关键字高亮展示相关推荐

vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
angular+TS实现搜索关键字高亮
前端实现基于后端返回的文档内容关键字搜索高亮需求背景及技术实现针对上传的word文档实现关键字搜索高亮且需要通过向上向下查找按钮实现当前关键字位置高亮颜色不一样后端返回文档的html内容前端 ...
动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
vs code vue 语法提示不全_Vue造轮子必备*.vue文件源码读取并高亮展示
相关依赖版本: node v10.15.0 npm v6.4.1 yarn v1.22.10 vue-cli v4.5.9 @vue/compiler v3.0.4 GitHub: vue-sour ...
vue element table 相关页面跳转实例代码
vue element table 相关页面跳转实例代码 <el-table-column width="100px" align="center" la ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
使用JS实现博客搜索关键字高亮
说明最近博客添加了搜索功能,有个需求是要针对搜索结果中搜索关键字需要高亮显示. 以便用户可以更快速的挑选自己中意的文章. 原理就是在渲染列表数据中给含有关键字的文本标签添加自定义class,渲染完毕 ...
微服务框架 SpringCloud微服务架构 25 黑马旅游案例 25.5 排序和搜索关键字高亮
微服务框架 [SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式,系统详解springcloud微服务技术栈课程|黑马程序员Java微服务] SpringCloud微服务 ...
搜索关键字高亮_SpringBoot+Mybatis-Plus+Elasticsearch 实现关键字搜索高亮展示
一.概述&介绍 Elasticsearch:Elasticsearch 是基于Lucense 技术的搜索引擎(服务器),将数据进行缓存再进行查询. 与数据库查询的比较: (1)相当于sql ...

vue + element table 实现搜索关键字高亮展示

vue + element table 实现搜索关键字高亮展示相关推荐

最新文章

热门文章