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

模拟搜索框和表格不在同一组件内，也不再同一相邻父子组件，可以，采用EventBus的方式进行数据传递，这里我采用团队再封装的@aecworks/event-bus组件库

在调用search方法的时候，存储搜索的关键字-searchData
public search(){
    // 做一些你需要进行的操作，比如调用搜索接口或者过滤数据

    // import EventBus from '@aecworks/event-bus'; 
    // 第一个参数是事件名称，第二个参数是需要传递的数据
    EventBus.instance.dispatch('searchData', this.searchInput);
}

在表格组件中获取搜索的关键字-searchData
public mounted() {
    EventBus.instance.addEventListener('searchData', (data)=>{
        // 提前声明一个变量来存储
        // data  ---   {type: "事件名", target: "数据"}
        this.searchData = data.target
    }, this);
}

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