实现需求如下:
需要将费用的某项通过状态或值变为红色,有多个费用项
实现思路:
后台:将其中要变为红色的字段的名称存到一个字段内,多个用字符串拼接
前台:实现如下
element中table表格有一个cell-style属性,可以绑定一个方法,能获取到表格内每一行的数据,代码如下:
<el-table
:cell-style="cellStyle"
:data="tableData"
height="100%"
>
methods: {
cellStyle(row) {
console.log(row)
// 获取当前行表头的名字,以及是否有要变颜色的字段名字,后台组装的数据放到了red字段中,如果有要变颜色的,就把它的字段名放到red字段中,因此,我们用indexOf去判断red字段中是否包含当前表头的名字,从而给他定义颜色
if (row.column.label == "公路运费" && row.row.red.indexOf("freightCost") != -1) {
return "color:#FF0000";
}
if (row.column.label == "转场费" && row.row.red.indexOf("transferCost") != -1) {
return "color:#FF0000";
}
}
}
版权声明:本文为webbirds原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。