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

前言

最近一段时间重新打开自己做的项目，突然发现一些知识点没有总结到。现在马上补上，就是在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来确定然后在通过另一列显示的数据是不是我们自己定义的那个数据，如果说是的话，那么我们就必须将这行数据的这一列将其红色标识出来(这颜色是可以自定义的)。

结语

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