element ui 怎么实现让表格内的内容自定义颜色

需求分析

我们在做表格的时候经常需要将不正常的数据显示出来，所以我们这个时候就需要将这个数据变换一个显眼的颜色显示出来。可以是用户快速的看到重要的数据。

首先

查看element-UI 可以知道这边可以对行和列进行操作

直接上代码：

1、现在表格中绑定一个cellStyle方法

  <el-table
          :data="tableData"
          style="width: 100%"
          class="customer-no-border-table"
          :cell-style="cellStyle"
        >

2、编写cellStyle 的方法

//让table的字变成红色
    cellStyle(row,column,rowIndex,columnIndex){
      if (row.column.label==="结论"&&row.row.conclusion === "不正常"){
        return 'color:red'
      }
//如果想一行中显示另外一个预期关联的数据的话那么久在写一个
if (row.column.label==="检查结果"&&row.row.conclusion === "不正常"){
        return 'color:red'
      }

//说明：
//row.column.label ：你表格的字段名
//row.row.conclusion：表格字段名返回的值

结果

搞定收工！！