Part.1 关键代码

  1. var s = "天气"; // 需要匹配的字符
  2. var reg = new RegExp("(" + s + ")", "g"); // 形成正则规则
  3. var str = "天气真好,可以出去玩玩"; // 全部字符
  4. var newstr = str.replace(reg, "<font color=red>$1</font>"); // 筛选符合规则字符 

Part.2 问题

我需要搜索下图表格中 “因子标签” 列,当我输入 “测试” 关键字时需要文字变成红色,如何进行?

搜索条件:

表格如下:

Part.3 解决

HTML:

  1. <p size="medium" v-html="showDate(scope.row.sortTags)"></p>

做法:

为需要特定显示列的字段添加了一个自定义方法  showDate

方法如下:

  1. showDate (val) {
  2. let tags = “测试”;
  3. if (tags !== null && tags !== '') {
  4. let reg = new RegExp("(" + tags + ")", "g");
  5. if (val !== null && val !== '') {
  6. return val.replace(reg, "<font style='color:red'>$1</font>");
  7. } else {
  8. return val
  9. }
  10. } else {
  11. return val
  12. }
  13. },

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. 如何正确使用log4j

      如何正确使用log4j? 关键字: 如何正确使用log4j? Java Web开发的过程中,通过会采用输出log的方式来进行调试,产品上线之后,也通常使用log来记录系统的运行状态.最简单的输出l ...

  2. [noip模拟赛]午餐

    https://www.zybuluo.com/ysner/note/1325779 题面 一共有\(n\)个人,林先森知道开始时只有\(1\)号会毒瘤算法.林先森了解到很多人一起吃过 午餐;具体地, ...

  3. poj 2411((多米诺骨牌问题))

    Mondriaan's Dream Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 12854   Accepted: 748 ...

  4. Velocity魔法堂系列一:入门示例(转)

    Velocity魔法堂系列一:入门示例 一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本 ...

  5. fiddler工具使用

    一.安装 a) 百度fiddler ,下载, 安装 ,无脑流 二.界面介绍 a) 工具栏与状态栏 其中保存是,可以为两种形式:1.text文本形式 2.saz文件结尾数据(能被fiddler软件识别) ...

  6. 洛谷 P1081 开车旅行【双向链表+倍增】

    倍增数组的20和N写反了反复WAWAWA-- 注意到a和b在每个点上出发都会到一个指定的点,所以这样构成了两棵以n点为根的树 假设我们建出了这两棵树,对于第一问就可以枚举起点然后倍增的找出ab路径长度 ...

  7. bzoj 4814: [Cqoi2017]小Q的草稿【计算几何】

    //先打个50暴力,10min50分简直美滋滋~ #include<iostream> #include<cstdio> #include<algorithm> u ...

  8. DBMS "无法作为数据库主体执行,因为主体“dbo”不存在、无法模拟这种..........”

    解决方案: 新附加的数据库需要设置所有者才能建立数据库关系图.供参考的操作步骤如下: 选择“AdventureWorks2012LT”,右键,选择“属性”,选择“文件”页,点击“所有者”右侧按钮,点击 ...

  9. SQL 初级教程学习(五)

    1.DEFAULT 约束用于向列中插入默认值. CREATE TABLE Orders(Id_O int NOT NULL,OrderNo int NOT NULL,Id_P int,OrderDat ...

  10. ROS学习笔记五:创建和使用ROS msg和srv

    1 msg和srv简介 1.1 msg文件 msg文件就是一个简单的text文件,其中每行有一个类型和名称,可用的类型如下: int8, int16, int32, int64 (plus uint* ...