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;
    }
}

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