How to map class to particular row cell in Element UI table based on condition?

Faizan Saiyed picture Faizan Saiyed · Jun 27, 2018 · Viewed 8k times · Source
<el-table :data="confirmedAppointments" highlight-current-row style="width: 100%">
                  <el-table-column type="index" width="50">
                  </el-table-column>
                  <el-table-column prop='token' label="Token" width="180">
                  </el-table-column>
                  <el-table-column prop='date'  label="Appoint. date" width="180">
                  </el-table-column>
                  <el-table-column prop='ROV' label="ROV" width="180">
                  </el-table-column>
                  <el-table-column prop='speciality' label="Speciality" width="180">
                  </el-table-column>
                  <el-table-column prop='time' label="Appoint. time" width="180">
                  </el-table-column>
                  <el-table-column prop='status' label="Status" class="red" v-bind:class="{ 'green': status == 'Accepted' }">
                  </el-table-column>

              </el-table>

I'm using Element UI table component mapped with dynamic data. On the last column, I have status showing Appproved or Rejected text.

So how can I set particular class to particular cell based on the cell value. By default, the class should be red, but when status value is Approved, the class should be green.

Answer

Andrii Dotsia picture Andrii Dotsia · Aug 16, 2018

I'm not so familiar with element ui, but pretty the same problem I solve by adding row-class-name to el-table

tableRowClassName({ row }) {

    if (row.status === 'Appproved') {
        return 'success-row'
      } else if (row.status === 'Rejected') {
        return 'warning-row'
      }
      return ''
    },
  .el-table .warning-row td:last-child {  (or just .el-table td:last-child (as default color))

    background: red;
  }

  .el-table .success-row td:last-child {

    background: green;
  }
< el-table :row-class-name="tableRowClassName">