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 ...
随机推荐
- android 自定义View开发实战(六) 可拖动的GridView
1前言 由于项目需求,需要把项目的主界面采用GridView显示,并且需要根据模块优先级支持拖动图标(砍死产品狗).为此,自定义了一个支持拖拽图标的GridView.效果如下: 具体效果如上图 2 可 ...
- 并不对劲的bzoj1305: [CQOI2009]dance跳舞
传送门-> 又是陈年老坑. 听上去不知道从何下[手]?那要是把题目换成“判断这些人能否条x支舞”呢? 这样就变成了一个网络流可以解决的问题,只要把每个人拆成喜欢和不喜欢两点,每个人两点总流量不超 ...
- 如何编写linux下nand flash驱动-3
[读(read)操作过程详解] 以最简单的read操作为例,解释如何理解时序图,以及将时序图 中的要求,转化为代码. 解释时序图之前,让我们先要搞清楚,我们要做的事情:那就是,要从nand flash ...
- CF 809 D Hitchhiking in the Baltic States —— 思路+DP(LIS)+splay优化
题目:http://codeforces.com/contest/809/problem/D 看题解,抄标程...发现自己连 splay 都快不会写了... 首先,题目就是要得到一个 LIS: 但与一 ...
- 深入学习 Block
本文翻译自苹果的文档,有删减,也有添加自己的理解部分. 如果有Block语法不懂的,可以参考fuckingblocksyntax,里面对于Block 为了方便对比,下面的代码我假设是写在ViewCon ...
- poj2676 Sudoku(搜索)
题目链接:http://poj.org/problem?id=2676 题意:9*9的方格,0代表没数字,其他代表数字,请在格子中填入1~9的数字,使得在每行,每列和每个3*3的方块中,1~9的数字每 ...
- Element-wise operations
Element-wise operations An element-wise operation operates on corresponding elements between tensors ...
- [POI2007]旅游景点atr
Description FGD想从成都去上海旅游.在旅途中他希望经过一些城市并在那里欣赏风景,品尝风味小吃或者做其他的有趣的事情.经过这些城市的顺序不是完全随意的,比如说FGD不希望在刚吃过一顿大餐之 ...
- Fools and Roads CodeForces - 191C
Fools and Roads CodeForces - 191C 题意:给出一棵n个节点的树,还有树上的k条简单路径(用路径的两个端点u和v表示),对于树上每一条边,求出其被多少条简单路径经过. 方 ...
- 题解报告:hdu 1503 Advanced Fruits(LCS加强版)
Problem Description The company "21st Century Fruits" has specialized in creating new sort ...