element-UI el-table表格根据搜索条件表格值改变颜色
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表格根据搜索条件表格值改变颜色的更多相关文章
- (Element UI 组件 Table)去除单元格底部的横线
		Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ... 
- Element Ui中table实现表格编辑效果
		主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ... 
- Element UI的Table用法
		Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ... 
- element ui 合计/table show-summary
		在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ... 
- element ui里面table分页,页数从0开始的怎么做?
		需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ... 
- 怎么样使element ui 的table某列变色
		第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ... 
- element ui的table的头部自定义
		<el-table-column label="级别" min-width="120" prop="clueLevel" align= ... 
- Element ui select同时获取value和label的值
		代码如下: <el-form-item v-if="isMD" label="业务员名称"> <el-select v-model=" ... 
- element ui 中的时间选择器怎么设置默认值/el-date-picker区间选择器怎么这是默认值
		template代码 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" ty ... 
随机推荐
- I.MX6 android mkuserimg.sh
			/************************************************************************** * I.MX6 android mkuserim ... 
- BZOJ_1195_[HNOI2006]最短母串_AC自动机+BFS+分层图
			BZOJ_1195_[HNOI2006]最短母串_AC自动机+BFS+分层图 Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2, ... 
- BZOJ_5368_[Pkusc2018]真实排名_组合数
			BZOJ_5368_[Pkusc2018]真实排名_组合数 Description 小C是某知名比赛的组织者,该比赛一共有n名选手参加,每个选手的成绩是一个非负整数,定义一个选手的排名是:成绩不小于他 ... 
- sql sever使用sql语句查询数据, 分割某字段改为多行,其它字段保持不变
			如表中有A.B.C三个字段,数据如下: A B C 1,2 3 4 要求查询结果: A B C 1 3 ... 
- HDU1452:Happy 2004(积性函数)(因子和)
			题意 给出\(x\),求\(2004^x\)的所有因子和 分析 \(2004=2*2*3*167\) 则\(2004^x\)=\(2^{2x}*3^x*167^x\) s[\(2004^x\)]=s[ ... 
- (11)用css设计电子相册 {上}
			本篇学习资料讲解: 通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ... 
- ntp多台主机时间同步
			通俗的讲,多台主机ntp时间同步,就是自定义集群中一台机器(我们这里叫它server)与网络时间同步,然后其它主机与server主机时间同步 另外,ntp时间同步机制不是我们想象的那样直接同步,而是“ ... 
- jacoco 的使用及与jenkins的集成
			1.把jacocoagent.jar的包放入到dockerfile COPY jacocoagent.jar /opt/jacoco/lib/jacocoagent.jar 2.打完镜像,需要启动容器 ... 
- XML 基础学习
			在w3school看到了XML的教程,想到以前工作学习中也接触到了XML,但只是简单搜索了解了下,没有认真去学习XML的基础,所以现在认真看下其基础部分,并写篇博客作为笔记记录下. XML 简介 XM ... 
- [SPOJ375]Qtree
			Description You are given a tree (an acyclic undirected connected graph) with N nodes, and edges num ... 
