zoukankan      html  css  js  c++  java
  • 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 结果

  • 相关阅读:
    T2487 公交司机(搜索题)(小L的一生)
    T2485 汉诺塔升级版(普及)(递归)
    T2483 电梯(模拟题)
    将图片返回到前端
    session
    TCP协议
    socket
    断点调试
    解析字符串
    Cookie
  • 原文地址:https://www.cnblogs.com/langxiyu/p/10638044.html
Copyright © 2011-2022 走看看