【Vue】如何让表格单独行的某一列用其他颜色显示

前言

步骤

我们要做的其实只有两步，第一步先看一下代码：

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

我们在<el-table ::cell-style="cellStyle"> 绑定一下列的格式，那么接着就是第二步我们自己要自定义一下那些列是要进行单独颜色标出的。上代码：

methods: {
          
   

    //让table的字变成红色
    cellStyle(row,column,rowIndex,columnIndex){
          
   
      if (row.column.label==="结论"&&row.row.conclusion === "不正常" || row.column.label==="结论"&&row.row.conclusion === "肥胖"
        || row.column.label==="结论"&&row.row.conclusion === "消瘦" || row.column.label==="结论"&&row.row.conclusion === "消瘦"){
          
   
        return color:red //颜色可以自己选择
      }

      if (row.column.label==="检查结果"&&row.row.conclusion === "不正常" || row.column.label==="检查结果"&&row.row.conclusion === "肥胖"
        || row.column.label==="检查结果"&&row.row.conclusion === "消瘦" || row.column.label==="检查结果"&&row.row.conclusion === "消瘦"){
          
   
        return color:red
      }

    }
}

代码的意思就是说，首先你要确定一下就是你要显示的那一列通过lable来确定然后在通过另一列显示的数据是不是我们自己定义的那个数据，如果说是的话，那么我们就必须将这行数据的这一列将其红色标识出来(这颜色是可以自定义的)。

结语

好了，经过上面的简单两步就可以实现某一行的单独某一列实现按不同颜色的显示了。 收工~