本文主要用来记录实现搜索功能后 如何高亮显示关键字,不介绍搜索功能的实现,文末附带的参考连接有更为详细的介绍,有需要的同学可以进行参考
// 搜索框
<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;
}
}
参考文章:
搜索文字并高亮定位显示
特殊正则表达式