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 结果

element-UI el-table表格根据搜索条件表格值改变颜色的更多相关文章

  1. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  2. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  3. Element UI的Table用法

    Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

  4. element ui 合计/table show-summary

    在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...

  5. element ui里面table分页,页数从0开始的怎么做?

    需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

  6. 怎么样使element ui 的table某列变色

    第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...

  7. element ui的table的头部自定义

    <el-table-column label="级别" min-width="120" prop="clueLevel" align= ...

  8. Element ui select同时获取value和label的值

    代码如下: <el-form-item v-if="isMD" label="业务员名称"> <el-select v-model=" ...

  9. element ui 中的时间选择器怎么设置默认值/el-date-picker区间选择器怎么这是默认值

    template代码 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" ty ...

随机推荐

  1. Oracle 删除用户和表空间////Oracle创建删除用户、角色、表空间、导入导出、...命令总结/////Oracle数据库创建表空间及为用户指定表空间

    Oracle 使用时间长了, 新增了许多user 和tablespace. 需要清理一下 对于单个user和tablespace 来说, 可以使用如下命令来完成. 步骤一:  删除user drop ...

  2. hdu-4118 Holiday's Accommodation(树形dp+树的重心)

    题目链接: Holiday's Accommodation Time Limit: 8000/4000 MS (Java/Others)     Memory Limit: 200000/200000 ...

  3. OpenMediaVault 系统安装问题

    /********************************************************************* * OpenMediaVault 系统安装问题 * 说明: ...

  4. 视音频编解码基本术语及解释&MediaInfo

    MEDIA INFO 下载: https://mediaarea.net/en/MediaInfo/Download/Windows 摘要:          整理了一些基本视音频术语,用于入门和查询 ...

  5. idea清除缓存和索引

    转自:https://blog.csdn.net/mzy755423868/article/details/80559381

  6. Ubuntu 12.04下安装配置体验GNOME 3(转载)

    转自:http://www.tuicool.com/articles/zIbeIj 自己并不是一个思想前卫的人,穿衣审美也都是大众眼光.但是唯独喜欢在计算机方便尝试最新,心肝情愿的做小白鼠.近日,按耐 ...

  7. Hdu 5371 Hotaru's problem (manacher+枚举)

    题目链接: Hdu 5371 Hotaru's problem 题目描述: 给出一个字符串N,要求找出一条N的最长连续子串.这个子串要满足:1:可以平均分成三段,2:第一段和第三段相等,3:第一段和第 ...

  8. codevs 3044 矩形面积求并 || hdu 1542

    这个线段树的作用其实是维护一组(1维 平面(?) 上的)线段覆盖的区域的总长度,支持加入/删除一条线段. 线段树只能维护整数下标,因此要离散化. 也可以理解为将每一条处理的线段分解为一些小线段,要求每 ...

  9. Cunning Gena CodeForces - 417D

    Cunning Gena CodeForces - 417D 题意 先将小伙伴按需要的监视器数量排序.然后ans[i][j]表示前i个小伙伴完成j集合内题目所需最少钱.那么按顺序枚举小伙伴,用ans[ ...

  10. Service官方教程(2)*IntentService与Service示例、onStartCommand()3个返回值的含义。

    1.Creating a Started Service A started service is one that another component starts by calling start ...