element-UI el-table表格根據搜索條件表格值改變顏色

Part.1 關鍵代碼

     var s = "天氣";  // 需要匹配的字符
     var reg = new RegExp("(" + s + ")", "g");  // 形成正則規則
     var str = "天氣真好，可以出去玩玩";  // 全部字符
     var newstr = str.replace(reg, "<font color=red>$1</font>"); // 篩選符合規則字符 

Part.2 問題

我需要搜索下圖表格中 “因子標簽” 列，當我輸入 “測試” 關鍵字時需要文字變成紅色，如何進行？

搜索條件：

 

表格如下：

Part.3 解決

HTML：

 <p size="medium" v-html="showDate(scope.row.sortTags)"></p>

做法：

  為需要特定顯示列的字段添加了一個自定義方法  showDate

方法如下：

 showDate (val) {
    let tags = “測試”;
    if (tags !== null && tags !== '') {
       let reg = new RegExp("(" + tags + ")", "g");
       if (val !== null && val !== '') {
           return val.replace(reg, "<font style='color:red'>$1</font>");
       } else {
           return val
       }
    } else {
        return val
    }
 },

Part.4 結果