vue项目中 el-table中关键字高亮

在el-table-column中使用
<el-table-column
    show-overflow-tooltip
    v-for="item in dataTableColumn"
    :render-header="renderHeader"
    :key="item.prop"
    :prop="item.prop"
    :label="item.title">
  <template slot-scope="scope">
     <span  v-html="showData(scope.row[item.prop])"></span>
  </template>
</el-table-column>

showData方法 样式可以自己调节

searchKeyWord为需要高亮的关键字

showData(val) {
  val = val + "";
  if (val.indexOf(this.searchKeyWord) !== -1 && this.searchKeyWord !== "") {
    return val.replace(
        this.searchKeyWord,
      '<span  style="color:#fff;background:#F2A100">' +this.searchKeyWord + "</span>"
    );
  } else if(val !== 'null' && val !== 'undefined'){
    return val
  }else{
    return '-'
  }
},