vue 关键字高亮

view:
这里是通过关键字搜索出学生的数组了。
高亮显示是通过v-html 替换一个带有颜色的span标签

<el-table :data="tableData" border style="width: 100%; margin-top: 20px">

    <el-table-column  label="考号" width="180">
         <template slot-scope="scope">
               <span v-html="searchKeyword(scope.row.TYBH, searchInput)"></span>
          </template>
    </el-table-column>

 </el-table>

script

data(){
      searchInput:' ',
      data:[ ]
},
methods:{
      searchKeyword(val, keyword){    //关键字高亮
           val = val + '';
           if(val.indexOf(keyword) !== -1 && keyword !== '' ){
                 return val.replace(keyword, `<span style="color:red;">${keyword}</span>`);
           }else{
                 return val;
           }
       },
}