vue3 + elementui 实现搜索关键字高亮展示

<el-table-column prop="propertyName" label="文件名称" min-width="300" show-overflow-tooltip><template #default="scope"><div class="alignCenter"><span class="ml10 cursor" v-html="showData(scope.row.propertyName, '这里是搜索内容')"></span></div></template></el-table-column>

// 替换关键字颜色
const 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, `${searchData}`);const res = val.replace(Reg, `$&`);return res;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！