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

最新推荐文章于 2024-08-21 14:48:47 发布

原创最新推荐文章于 2024-08-21 14:48:47 发布 · 4.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue.js

本文介绍如何使用Element UI中的table组件结合后台数据处理，实现特定字段的红色高亮显示功能。通过在表格的cell-style属性中绑定方法，根据字段名判断是否需要改变颜色。

实现需求如下：

需要将费用的某项通过状态或值变为红色，有多个费用项

实现思路：
后台：将其中要变为红色的字段的名称存到一个字段内，多个用字符串拼接
前台：实现如下
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";
    }
  }
}