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. 用dpkg命令制作deb包方法总结

    用dpkg命令制作deb包方法总结 如何制作Deb包和相应的软件仓库,其实这个很简单.这里推荐使用dpkg来进行deb包的创建.编辑和制作. 首先了解一下deb包的文件结构: deb 软件包里面的结构 ...

  2. UltraEdit mac破解版

    2018-01-17 增加18.00.0.19破解 去官网下载原载,先运行一次,再在终端里执行下面代码就可以破解完成! printf '\x31\xC0\xFF\xC0\xC3\x90' | dd s ...

  3. 强大的DataGrid组件[7]_自定义DataGrid——Silverlight学习笔记[15]

    基本知识讲解 1)两种状态 DataGrid的单元格的状态有两类,即编辑状态和非编辑状态. 在实际开发中,如果一个单元格所在的列不设为只读的话(即要求可读写),那么这个单元格就存在这两种状态.按需要, ...

  4. 一个tomcat部署多个应用实例总结

    项目组有好几个项目需要运行,之前项目少,一个tomcat对应一个项目还能应付,但现在项目多了,要是再一个tomcat对应一个项目的话,一方面看起来很业余,一方面也加大服务器的维护难度.所以现在需要对t ...

  5. Java:目录

    ylbtech-Java:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech. ...

  6. Python sklearn Adaboost

    1. Adaboost类库概述 scikit-learn中Adaboost类库比较直接,就是AdaBoostClassifier和AdaBoostRegressor两个,从名字就可以看出AdaBoos ...

  7. js方式的页面跳转

    window.location.href="login.html";   (直接function里面执行 跳转)

  8. bzoj 1497 [NOI2006]最大获利【最大权闭合子图+最小割】

    不要被5s时限和50000点数吓倒!大胆网络流!我一个5w级别的dinic只跑了1s+! 看起来没有最大权闭合子图的特征--限制,实际上还是有的. 我们需要把中转站看成负权点,把p看成点权,把客户看成 ...

  9. bzoj 3979: [WF2012]infiltration【瞎搞+随机化】

    参考:https://www.cnblogs.com/ccz181078/p/5622200.html 非常服气.jpg 就是random_shuffle几次然后顺着找,ans取min... #inc ...

  10. Luogu P1991 无线通讯网 【最小生成树】

    题目描述 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络: 每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话. 任意两个配备了一条卫星电话线路的哨所(两边都 ...