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

本文记录实现搜索功能后,关键字的高亮显示方法,不涉及搜索功能实现。文末附带参考文章,对相关内容有更详细介绍,可按需参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

// 搜索框
<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;
    }
}

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值