效果：
代码：
①为table的vxe-table-column添加属性type="html"
1 <vxe-table-column field="openId" title="开放编号" min-width="150" align="left" header-align="center" sortable> 2 </vxe-table-column> 3 <vxe-table-column field="cardId" type="html" title="会员卡号" min-width="150" align="left" header-align="center" sortable> 4 </vxe-table-column> 5 <vxe-table-column field="nickName" type="html" title="会员昵称" min-width="150" align="left" header-align="center" sortable> 6 </vxe-table-column>
②添加代码高亮方法
1 highlightKeyword(val,keyword) {//高亮关键字
2 if (val.indexOf(keyword) !== -1) { 3 return val.replace(keyword, `<b style='color:#F86205;" style="color: rgb(255, 0, 0);">#ff0'>${keyword}</b>`) 4 } else { 5 return val 6 } 7 }
③查询结果根据关键字给json插入html标签
1 listEntity(this.queryParams).then(response => {
2 this.tableList = response.rows 3 4 //根据关键字高亮显示 5 if(this.queryParams.keyword_LIKE.trim() !== ""){ 6 let keyword = this.queryParams.keyword_LIKE; 7 this.tableList.forEach((item) => { 8 if ((item.cardId||"").indexOf(this.queryParams.keyword_LIKE) > -1) { 9 item.cardId = this.highlightKeyword(item.cardId,keyword) 10 } 11 if ((item.nickName||"").indexOf(this.queryParams.keyword_LIKE) > -1) { 12 item.nickName = this.highlightKeyword(item.nickName,keyword) 13 } 14 if ((item.phone||"").indexOf(this.queryParams.keyword_LIKE) > -1) { 15 item.phone = this.highlightKeyword(item.phone,keyword) 16 } 17 if ((item.address||"").indexOf(this.queryParams.keyword_LIKE) > -1) { 18 item.address = this.highlightKeyword(item.address,keyword) 19 } 20 }) 21 } 22 23 this.total = response.total 24 this.loading = false 25 })