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. Hibernate、Spring和Struts2工作原理

    Hibernate.Spring和Struts2工作原理 博客分类: Java 基础 工作HibernateSpringMVCStruts  Hibernate.Spring和Struts2工作原理  ...

  2. Multi-threading Android Apps for Multi-core Processors – Part 1 of 2

    Can my single-threaded application benefit from multiple cores? How? Even a single-threaded applicat ...

  3. codeforces 686D D. Kay and Snowflake(dfs)

    题目链接: D. Kay and Snowflake time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  4. debian webmin 安装

    /******************************************************************** * debian webmin 安装 * 说明: * 在服务 ...

  5. Ural2102:Michael and Cryptography(数论&素数)

    The hacker Michael develops breakthrough password manager, which is called KEK (Keeper of Encrypted ...

  6. [HNOI 2007] 紧急疏散

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1189 [算法] 首先 , 答案具有单调性 , 不妨二分答案” 第mid秒是否可以完成 ...

  7. 优化Laravel的分页LIMIT和OFFSET调用

    在分页系统中使用limit和offset是很常见的,它们通常也会和ORDER BY一起使用.索引对排序较有帮助,如果没有索引就需要大量的文件排序. 一个常见的问题是偏移量很大,比如查询使用了LIMIT ...

  8. 详解Python的*args和 **kwargs

    转自: http://www.python[tab].com/html/2016/pythonhexinbiancheng_0802/1057.html *args表示任何多个无名参数,它是一个tup ...

  9. 洛谷 P3356 火星探险问题 【最大费用最大流】

    输出方案好麻烦啊 拆点,石头的连(i,i',1,1)(i,i',inf,0)表示可以取一次价值1,空地直接连(i,i',inf,0),对于能走到的两个格子(不包括障碍),连接(i',j,inf,0), ...

  10. CF915E Physical Education Lessons(珂朵莉树)

    中文题面 据说正解是动态开点线段树而且标记也不难下传的样子 然而这种区间推平的题目还是喜欢写珂朵莉树啊……码量小…… 虽然真要构造的话随便卡…… //minamoto #include<cstd ...