第一步.在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某列变色的更多相关文章

  1. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  2. Element UI的Table用法

    Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

  3. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  4. element ui 合计/table show-summary

    在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...

  5. element ui里面table分页,页数从0开始的怎么做?

    需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

  6. element ui的table的头部自定义

    <el-table-column label="级别" min-width="120" prop="clueLevel" align= ...

  7. 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

  8. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  9. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

随机推荐

  1. Angular中ViewChild\ngAfterViewInit\Promise的使用,在父组件初始化时等待子组件的返回值

    1.子component中的异步方法 initCreateJob = () => new Promise((resolve, reject) => { setTimeout(() => ...

  2. Elasticsearch 主要监控指标 -- 描述了es监控的几个维度,相当不错!

    转发自:https://blog.csdn.net/majianxiong_lzu/article/details/90437559 主要指标梳理 Cluster Health – Nodes and ...

  3. Java 之 Maven 基础

    一.Maven 介绍 1.什么是 Maven Maven 是一个项目管理工具,它包含了一个项目对象模型(POM:Project Object Model),一组标准集合,一个项目生命周期(Projec ...

  4. 车间管理难?APS系统为你智能排程

    对 APS系统不熟或者不了解他的一些运行规则也是在实施项目中导致经常不能正常运行不可忽视的因素,对 APS系统的早期了解是整个项目实施运行的成功至关重要的因素. 如果不了解 APS潜在的因素和运行准则 ...

  5. 使用SAP open connector调用第三方系统的API

    我们把hubspot这个SaaS CRM作为第三方系统,首先登录hubspot,创建一个新的API key: 把创建的key拷贝到剪切板里: 然后登录SAP Cloud for Customer上的o ...

  6. python模块之json pickle

    1.json模块 功能:将其他形式的数据类型转化为json字符串类型,将json字符串转化为其他对应的数据类型 方法:json.dumps()  作用:将所有单引号变成双引号:将所有数据类型变成字符串 ...

  7. CentOS安装MySQL8.x

    MySQL的安装 (4,5,6可省略) 声明:CentOS版本为7.6,安装的MySQL版本为8.0.17 1. 首先要卸载掉本机自带的mysql相关,包括MariaDB. rpm -pa | gre ...

  8. docker容器监控:cadvisor+influxdb+grafana

    cadvisor+influxdb+grafana可以实现容器信息获取.存储.显示等容器监控功能,是目前流行的docker监控开源方案. 方案介绍 cadvisor Google开源的用于监控基础设施 ...

  9. NGINX并发量优化

    NGINX并发量优化 一.压力测试 命令:ab -c 2000 -n 2000 web服务器的地址 ab:压力测试工具 -c:client缩写,客户端的数量 -n:总的访问量,所有客户端总共的访问量. ...

  10. MSDS 596 Homework

    MSDS 596 Homework 10 Due November 28 2017Notes. The lowest grade among all eleven homework will be d ...