vue中vxe-table根据关键字文本内容高亮

Posted 2021-06-01 淡语

效果：

 

 

代码：

①为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           })