vue+Element实现搜索关键字高亮功能

if (this.checkPara(val,this.listQuery.queryMessage)||this.checkPara(val,this.listQuery.queryMessage2)
||this.checkPara(val,this.listQuery.queryMessage3)) {
//如果搜索结果记录包含关键字中的任何一个，那么修改样式
return val.replace(this.listQuery.queryMessage'<font color="#409EFF">' + this.listQuery.prodcd + '</font>')
.replace(this.listQuery.queryMessage2, '<font color="#409EFF">' + this.listQuery.queryMessage3 + '</font>')

} else {
return val //不做任何修改
}
},
//判断搜索记录是否包含某个关键字
checkPara(val,para){
if (val.indexOf(para) !== -1 && para !== ''){
return true;
}else {
return false
}
}

三、总结

实现以后会觉得思路很简单。其实任何一个多么复杂的需求，只要在做之前，理清思路，分成一个个小的实现过程，那么就自然很简单，而且效率也很高。这也是我的真切感受。