在一些查詢中牢屋，我們希望我們查詢的關(guān)鍵字烙无，可以在查詢內(nèi)容中高亮出來
this.arr = response.data
this.caseList = []
this.arr.forEach(item => {
this.caseList.push(item)
console.info(item, '11111111111111')
})
this.caseList.map(item => {
item.context = this.brightKeyword(item.context)
})
brightKeyword(val) {
let keyword = this.fullSelect
if (val.indexOf(keyword) !== -1) {
return val.replace(keyword, `<font color='#ff5134'>${keyword}</font>`)
} else {
return val
}
}
arr是我們從后臺獲取的數(shù)據(jù)遍尺，我們對arr這個(gè)數(shù)據(jù)進(jìn)行遍歷乾戏，將arr數(shù)據(jù)中的單個(gè)數(shù)據(jù)一個(gè)一個(gè)取出來，插入我們項(xiàng)目中的caseList中灾部，map方法是返回一個(gè)新的數(shù)組惯退，在這里的意思是催跪，對caseList數(shù)組中context數(shù)據(jù)進(jìn)行高亮后，重新生成一個(gè)caseList數(shù)組
高亮的方法中fullSelect是我們在input框中輸入的東西荣倾，font標(biāo)簽中的顏色根據(jù)自己項(xiàng)目的需要可以更換骑丸，其他的照搬就可以啦。這個(gè)地方只高亮了內(nèi)容灌曙，當(dāng)然需要高亮標(biāo)題或者別的节芥，再map中再加入就可以啦头镊。
這種做法避免了一個(gè)弊端是：假如我的關(guān)鍵字在查詢過程中沒有結(jié)果，也可以顯示出來颖杏，只不過沒有高亮效果而已坛芽。
但是也存在了一個(gè)問題indexOf只會返回第一次與關(guān)鍵字的地方靡馁，也就是說假如內(nèi)容中與關(guān)鍵字匹配的可能有好多處机久，但是只能高亮第一處
這個(gè)問題目前也在尋找方法，找到了再來補(bǔ)充呀~
