【实现搜索结果中搜索内容关键字高亮】

 

// 筛选变色

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>