vue搜索结果高亮展示

最新推荐文章于 2024-01-24 17:40:33 发布

TD暴走小叮当

最新推荐文章于 2024-01-24 17:40:33 发布

阅读量234

点赞数

分类专栏： VUE js vue模块语法文章标签： vue vue.js javascript

本文链接：https://blog.csdn.net/shiningyn/article/details/105441068

版权

VUE 同时被 3 个专栏收录

11 篇文章 1 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

vue模块语法

2 篇文章 0 订阅

订阅专栏

核心代码展示

// 筛选变色
brightenKeyword(val, keyword) {
  val = val + '';
  if (val.indexOf(keyword) !== -1 && keyword !== '') {
    return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')
  } else {
   return val
  }
}
// 或者用正则表达式
brightenKeyword(val, keyword) {
  const Reg = new RegExp(keyword, 'i');
  if (val) {
    return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`);
  }
}
// 使用方法
<el-table-column label="维护内容">
  <template slot-scope="scope">
   <span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
  </template>
</el-table-column>