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 ...
随机推荐
- mac系统下配置域名映射关系
1.cd /private/etc/ 先修改权限:sudo chmod 777 hosts vi hosts localhost:etc mhx$ cat hosts ## # Host Databa ...
- mac系统怎么给文件夹加密?mac文件夹加密教程
mac系统怎么给文件夹加密?目前来说,若想要对你的Mac OS下面的文件进行加密的话有三种方法可以可以做到,第一种方法,Mac自带磁盘工具:第二种方法,例如BatterZip此类Mac压缩解压工具打包 ...
- 《MuseGAN: Multi-track Sequential Generative Adversarial Networks for Symbolic Music Generation and Accompaniment》论文阅读笔记
出处:2018 AAAI SourceCode:https://github.com/salu133445/musegan abstract: (写得不错 值得借鉴)重点阐述了生成音乐和生成图片,视频 ...
- bzoj3090
树形dp 有一个比较明显的dp状态是dp[i][j]表示当前i节点的子树已经满足且i剩下j元钱的最小操作次数,这样复杂度比较高状态数已经有O(n*x)的了,转移再来x,肯定不行. 我们考虑把状态和dp ...
- React VSCode插件
可以安装2个插件,一个是 Atuo Rename Tag 一个 Auto Close Tag 这样就好都了
- Linux - 常用命令索引
文件和目录操作 pwd - 显示当前所在的位置 cd - 切换目录 文件过滤及内容编辑 ... 文本处理三剑客 ... 系统信息查询与搜索文件 ... 文件备份与压缩 ... 用户管理与信息查询 .. ...
- Codeforces Round #209 (Div. 2) C - Prime Number
传送门 题意 给出n个数及x,求 \[\frac{\sum _{i=1}^n x^{a_1+a_2+...+a_{i-1}+a_{i+1}+...a_n}}{\prod_{i=1}^n x^{a_i} ...
- 关于element-ui的diallog拖动的实现
先给下载地址 https://files.cnblogs.com/files/maruihua/el-dragDialog.rar 需要注意的是如果给模态框加入拖动指令,一些定位样式会出问题,需谨慎 ...
- NOIp 2014 寻找道路【图的遍历/最短路】By cellur925
题目传送门 比较裸的图论,结果自己还是没做出来,我真菜. 我们根据题意,只要把不能通向终点的点求出,然后再分别以这些点为起点,求出它们能到达的点,这些点也不能在路径上. 之后跑一个最短路即可. 注意以 ...
- hdu 2121 Ice_cream’s world II (无定根最小树形图)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2121 题目大意: 有n个点,有m条单向路,问这n个点组成最小树形图的最小花费. 解题思路: 1:构造 ...