vue table 行改变颜色

• 改变表格行背景色

el-table :cell-style="TableCellStyle"

 //设置表格背景颜色
  TableCellStyle(row: any, column: any, rowIndex: any, columnIndex: any) {
    if (!row.columnIndex) {
      return 'background-color:  #e2e7ea';
    } else {
      if (row.columnIndex < 11) {
        return 'background-color:  #e2e7ea';
      } else {
        return null;
      }
    }

  }

• 改变行文字颜色

方案一

el-table :row-class-name="tableAddClass"

tableAddClass({row,rowIndex}) {
  if (row.is_halt) {
    return 'tr-red';
  }
  return '';
}

<style scoped>
  .el-table .tr-red {
    color: red !important;
  }
</style>

方案二

el-table :cell-style="TableCellStyle"

 //设置表格背景颜色
  TableCellStyle(row: any, column: any, rowIndex: any, columnIndex: any) {
    if (!row.columnIndex) {
      return 'color:  #e2e7ea';
    } else {
      if (row.columnIndex < 11) {
        return 'color:  #e2e7ea';
      } else {
        return null;
      }
    }

  }