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 ...
随机推荐
- 如何正确使用log4j
如何正确使用log4j? 关键字: 如何正确使用log4j? Java Web开发的过程中,通过会采用输出log的方式来进行调试,产品上线之后,也通常使用log来记录系统的运行状态.最简单的输出l ...
- [noip模拟赛]午餐
https://www.zybuluo.com/ysner/note/1325779 题面 一共有\(n\)个人,林先森知道开始时只有\(1\)号会毒瘤算法.林先森了解到很多人一起吃过 午餐;具体地, ...
- poj 2411((多米诺骨牌问题))
Mondriaan's Dream Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 12854 Accepted: 748 ...
- Velocity魔法堂系列一:入门示例(转)
Velocity魔法堂系列一:入门示例 一.前言 Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板引擎,而且可以作为普通文本的模板引擎来增强服务端程序文本 ...
- fiddler工具使用
一.安装 a) 百度fiddler ,下载, 安装 ,无脑流 二.界面介绍 a) 工具栏与状态栏 其中保存是,可以为两种形式:1.text文本形式 2.saz文件结尾数据(能被fiddler软件识别) ...
- 洛谷 P1081 开车旅行【双向链表+倍增】
倍增数组的20和N写反了反复WAWAWA-- 注意到a和b在每个点上出发都会到一个指定的点,所以这样构成了两棵以n点为根的树 假设我们建出了这两棵树,对于第一问就可以枚举起点然后倍增的找出ab路径长度 ...
- bzoj 4814: [Cqoi2017]小Q的草稿【计算几何】
//先打个50暴力,10min50分简直美滋滋~ #include<iostream> #include<cstdio> #include<algorithm> u ...
- DBMS "无法作为数据库主体执行,因为主体“dbo”不存在、无法模拟这种..........”
解决方案: 新附加的数据库需要设置所有者才能建立数据库关系图.供参考的操作步骤如下: 选择“AdventureWorks2012LT”,右键,选择“属性”,选择“文件”页,点击“所有者”右侧按钮,点击 ...
- SQL 初级教程学习(五)
1.DEFAULT 约束用于向列中插入默认值. CREATE TABLE Orders(Id_O int NOT NULL,OrderNo int NOT NULL,Id_P int,OrderDat ...
- ROS学习笔记五:创建和使用ROS msg和srv
1 msg和srv简介 1.1 msg文件 msg文件就是一个简单的text文件,其中每行有一个类型和名称,可用的类型如下: int8, int16, int32, int64 (plus uint* ...