vue使用element-ui的表格，实现各行换色

  <el-table
       :data="tableData"
      :header-cell-style="tableHeaderColor"//头部变色
      style="width: 100%" :row-class-name="tableRowClassName"//隔行换色
      >
      <el-table-column
        align='center'
        label="日期" width="60">
        <el-table-column prop="date" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align='center'
        label="产品型号" width="80">
        <el-table-column prop="ProductModel" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column label="喷淋链速" width="120" align='center'>
        <el-table-column
          prop="spray.spraySet"
          align='center'
          label="设定" width="60">
        </el-table-column>
        <el-table-column
          prop="spray.sprayCur"
          align='center'
          label="实际" width="60">
        </el-table-column>
      </el-table-column>
      <el-table-column label="喷淋风刀频率"  width="120" align='center'>
        <el-table-column
          prop="rate.rateSet"
          align='center'
          label="设定" width="60">
        </el-table-column>
        <el-table-column
          prop="rate.rateCur"
          align='center'
          label="实际" width="60">
        </el-table-column>
      </el-table-column>
      <el-table-column
        align='center'
        label="氧气浓度">
        <el-table-column  prop="O2" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align='center'
        label="氮气浓度" >
        <el-table-column prop="N2" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column label="干燥炉" width="300" align='center'>
        <el-table-column label="1区" width="100" align='center'>
          <el-table-column
            prop="Dry.Dryone.DryoneSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Dry.Dryone.DryoneCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100" align='center'>
          <el-table-column
            prop="Dry.Drytwo.DrytwoSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Dry.Drytwo.DrytwoCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" align='center'>
          <el-table-column
            prop="Dry.Drythree.DrythreeSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Dry.Drythree.DrythreeCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="预热炉" width="300" align='center'>
        <el-table-column label="1区" width="100" align='center'>
          <el-table-column
            prop="Hot.Hotone.HotoneSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Hot.Hotone.HotoneCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100" align='center'>
          <el-table-column
            prop="Hot.Hottwo.HottwoSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Hot.Hottwo.HottwoCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" align='center'>
          <el-table-column
            prop="Hot.Hotthree.HotthreeSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Hot.Hotthree.HotthreeCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="钎焊炉" width="300" align='center'>
        <el-table-column label="1区" width="100" align='center'>
          <el-table-column
            prop="Brazing.Brazingone.BrazingoneSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Brazing.Brazingone.BrazingoneCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100" align='center'>
          <el-table-column
            prop="Brazing.Brazingtwo.BrazingtwoSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Brazing.Brazingtwo.BrazingtwoCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" align='center'>
          <el-table-column
            prop="Brazing.Brazingthree.BrazingthreeSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Brazing.Brazingthree.BrazingthreeCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
     methods:{
             tableRowClassName({row, rowIndex}) {
          if(rowIndex%2==1){
            return 'warning-row';
          }else{
            return 'success-row';
          }
        },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #ebf1fb;color: #496fec;font-weight:600;font-size:16px;text-align:center'
      }else if(rowIndex === 1){
        return 'background-color: #f7faff;font-size:14px;text-align:center'
      }else if(rowIndex === 2){
        return 'background-color: #f7faff;font-size:14px;text-align:center'
      }
    },
}
    <style>
  .el-table .warning-row {
    background: #f7faff;
  }
  .el-table .success-row {
    background: #ebf1fb;
  }
</style>复制代码