vue实现搜索文字高亮效果

html部分
 

<el-input class="home-search" placeholder="请输入您要办理的事项" v-model="keyword" clearable @input="getList()">
   <el-button slot="append" @click.native="getList()">搜索</el-button>
</el-input>

<template v-slot="{ row }">
  <span v-for="(item, index) in row.title.split(',')" :key="index">
    <span slot="title" v-html="highlight(item)"></span>
  </span>                      
</template>

js部分
 

highlight(text) {
   const highlightStr = `<span class="active">${this.keyword}</span>`
   const reg = new RegExp(this.keyword, 'gi')
   return text.replace(reg, highlightStr)
},

css

::v-deep .active {
    color: #ff5134;
}