第一步.在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. zookerper安装使用教程

    转载自 http://blog.java1234.com/blog/articles/379.html 再安装zookeeper之前,我们看下zookeeper简介 https://baike.bai ...

  2. springCloud学习1(集中式配置管理)

    springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 一.前言   在开发普通的 web 应用中,我们通常是将配置项写在单 ...

  3. wamp环境下配置https证书后,网站内容访问受限

    wamp环境下配置https证书后,网站内容访问受限,点击首页链接标签后报错,大致意思是没有权限进行操作. 解决方法:打开apache的http.conf(位置大致如下:项目所在目录\bin\apac ...

  4. js原型链的看法

    原型链 对象 对象: 1,函数对象:由function创造出来的函数 2,普通对象:除开函数对象之外的对象,都是普通对象 **即普通对象obj是构造函数Object的一个实例,因此: obj.__pr ...

  5. 【重大更新】Qlik Sense September 2018重磅发布(附下载)

    作为数据分析领域领导者,Qlik,始终致力于通过产品创新来帮助企业客户撬动数据力量.近日,Qlik Sense September 2018如期而至,不仅对原有版本进行了众多优化,还发布了一系列能够提 ...

  6. 子网掩码与ip地址的关系

    1.什么是ip地址 在网络中,所有的设备都会被分配一个地址.这个地址就相当于某条路上的XX号XX房.其中[号]对应的号码是分配了整个子网的,而[房]对应的号码是分配给子网中的计算机的,这就是网络中的地 ...

  7. js 获取 对象 属性名称(转载)

    来源:https://www.cnblogs.com/YuyuanNo1/p/9257634.html dataObj = {name : su,age : 26,height : 18cm }; f ...

  8. vue echarts中绑定的click函数无法引用vue实例data里面的数据

    在使用echarts的时候,需要在触发click事件之后去修改实例data里面的数据,可是发现用this引用后总是出现undefined, 解决办法: myChart.on('click', (par ...

  9. Jenkins+Docker+Git+Harbor流水线打包

    Jenkins+Docker+Git+Harbor流水线打包 环境: CentOS Linux release 7.6.1810 (Core) 192.168.247.214 Jenkins+dock ...

  10. 数据库开发-pymysql详解

    数据库开发-pymysql详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Python支持的MySQL驱动 1>.什么是驱动 与MySQL通信就是典型的CS模式.Se ...