怎么样使element ui 的table某列变色

第一步.在el-table里面加上:row-style="rowClass"
<el-table
:data="targetCarList"
border
fit
v-loading.body="listLoading"
element-loading-text="拼命加载中"
style="width: 100%"
:row-style="rowClass" >
</el-table>
第二步 再根据判断来决定颜色的显示
rowClass (row, index) {
if (this.statusActive === 'PURCHASE_OFFER') {
row.offerNum = row.offerNum ? row.offerNum : 0
if ((row.deployTimeTotal > 30 && row.deployTimeTotal <= 60) && row.offerNum === 0) {
return { "background-color": "#FFDDAA" }
} else if ((row.deployTimeTotal > 60) && row.offerNum === 0) {
return { "background-color": "#FFCCCC" }
}
}
},
上面的row打印出来是每一列的所有数据,决定颜色变化的是 return { "background-color": "#FFDDAA" },如果没有判断是直接返回的。
因为row-style主要是 ----行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。
怎么样使element ui 的table某列变色的更多相关文章
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- Element UI的Table用法
Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- 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-column label="级别" min-width="120" prop="clueLevel" align= ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
随机推荐
- JVM性能优化--字节码技术
一.字节码技术应用场景 AOP技术.Lombok去除重复代码插件.动态修改class文件等 二.字节技术优势 Java字节码增强指的是在Java字节码生成之后,对其进行修改,增强其功能,这种方式相当于 ...
- 深入理解es6(下)
一.symbol javascript基本数据类型: null.undefined.number.boolean.string.symbol ES6 引入了一种新的原始数据类型Symbol,表示独一无 ...
- linux技能四 用户管理
用户管理:用户类型,添加用户,修改用户,删除用户,查看用户信息,用户的切换,添加组,修改组,删除组,查看组 用户类型:超级用户:root,UID=1 系统用户:运行系统服务的,不能登陆的,UID=(1 ...
- Upgrade Windows Server 2016 to Windows Server 2019
Pre-Upgrade Upgrade path: Windows Server 2016 can be upgraded to Windows 2019 in a single upgrade pr ...
- maven学习笔记二(了解maven的基本命令)
maven常用的命令 mvn archetype:create 创建Maven项目 mvn compile 编译源代码 mvn deploy 发布项目 mvn test-compile 编译测试源代码 ...
- 静态Pod
静态Pod kubernetes 除了我们常用的普通Pod外,还有一种特殊的Pod,叫静态Pod. 概念 静态Pod是直接由节点kubelet进程来管理的,不能通过apiserver的master节点 ...
- MySQL/MariaDB数据库的用户和权限管理
MySQL/MariaDB数据库的用户和权限管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.元数据数据库(mysql) 系统授权表(均在mysql数据库中): db hos ...
- Pthon魔术方法(Magic Methods)-描述器
Pthon魔术方法(Magic Methods)-描述器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.描述器概述 1>.描述器定义 Python中,一个类实现了&quo ...
- solr和ElasticSearch(ES)的区别?
Solr2004年诞生 ElasticSearch 2010年诞生 ES更新 ElasticSearch简介: ElasticSearch是一个实时的分布式的搜索引擎和分析引擎.它可以帮助你用前所未有 ...
- HDU4091:Zombie’s Treasure Chest (分类-数学)
题意:给两种宝石,体积S1,S2,价值V1,V2,背包容量n,求最大收益. 所有数据都在32位整数范围内. 思路:只有两种物品的背包,显然不是常见的背包,应该从背包之外的思路下手. 1:可以猜想其中一 ...