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. es的forcemerge——按照天分割

    归并线程配置 segment 归并的过程,需要先读取 segment,归并计算,再写一遍 segment,最后还要保证刷到磁盘.可以说,这是一个非常消耗磁盘 IO 和 CPU 的任务.所以,ES 提供 ...

  2. python ConfigParser模块 配置文件解析

    ConfigParser模块主要是用来解析配置文件的模块,像mysql,或者win下面的ini文件等等 下面我们来解析mysql的配置文件my.cnf my.cnf配置文件内容 [mysqld] da ...

  3. 关于ArcGis for javascrept之FeatureLayer类与GraphicsLayer类

    FeatureLayer: ArcGIS for Server发布的要素服务或者地图服务中的图层 构造方法: myFeatureLayer = new esri.layers.FeatureLayer ...

  4. thinkphp不能够将ueditor中的html文本显示

    因为这个问题花费了我好长时间,非常的急躁.fuck!! 这次我首先在富文本框中输入了一些文本,这些文本是带有样式的,比如是代码.然后存入数据库,但是当我再一次将它取出来打算放入富文本框中的时候,马丹, ...

  5. J20170521-ts

    組み込み 内置 リダイレクト 重定向 ディスクリプタ 描述符 バッファリング n 缓冲  

  6. bzoj 2783: [JLOI2012]树【树上差分】

    注意是等于s不是大于s dfs,用set或者map存这条链到root的点权和sum[u],更新答案的时候查一下有没有s-sum[u]即可 #include<iostream> #inclu ...

  7. SpringMVC之HttpMessageConverter

    http://blog.csdn.net/zmx729618/article/details/53034420 HttpMessageConverter接口: T read(Class<? ex ...

  8. 《Windows核心编程系列》十一谈谈Windows线程池

    Windows线程池 上一篇博文我们介绍了IO完成端口.得知IO完成端口可以非常智能的分派线程.但是IO完成端口仅对等待它的线程进行分派,创建和销毁线程的工作仍然需要我们自己来做. 我们自己也可以创建 ...

  9. 数据结构 - 链栈的实行(C语言)

    数据结构-链栈的实现 1 链栈的定义 现在来看看栈的链式存储结构,简称为链栈. 想想看栈只是栈顶来做插入和删除操作,栈顶放在链表的头部还是尾部呢?由于单链表有头指针,而栈顶指针也是必须的,那干吗不让它 ...

  10. 414 Third Maximum Number 第三大的数

    给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n).示例 1:输入: [3, 2, 1]输出: 1解释: 第三大的数是 1.示例 2:输入: ...