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

第一步.在el-table里面加上:row-style="rowClass"

 <el-table:data="targetCarList"borderfitv-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 : 0if ((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" },如果没有判断是直接返回的。

转载于:https://www.cnblogs.com/antyhouse/p/10552115.html

怎么样使element ui 的table某列变色相关推荐

Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
解决element UI 表格el-table增加列会震动抖动的问题
beforeUpdate(){this.$nextTick(() => {this.$refs.myTable.doLayout();}) }, 在element UI里面有一个doLayout ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
element UI 修改 table 中某一列的值
(1)el-table 中增加 :cell-style 属性 <el-table:cell-style="columnStyle":default-sort="{p ...

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

怎么样使element ui 的table某列变色相关推荐

最新文章

热门文章