elementui如何给table表格中的其中一个值变化颜色

实现需求如下:
图1
需要将费用的某项通过状态或值变为红色,有多个费用项

实现思路:
后台:将其中要变为红色的字段的名称存到一个字段内,多个用字符串拼接
前台:实现如下
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版权协议,转载请附上原文出处链接和本声明。