Как сопоставить класс определенной ячейке строки в таблице пользовательского интерфейса элемента на основе условия?

Question

<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>

Я использую компонент таблицы пользовательского интерфейса Element, сопоставленный с динамическими данными. В последнем столбце у меня есть статус, показывающий текст Appproved или Rejected.

Так, как я могу установить определенный класс для определенной ячейки на основе значения ячейки. По умолчанию класс должен быть красным, но когда значение статуса «Одобрено», класс должен быть зеленым.

Answer 1

Взгляните на имя ячейки-класса атрибут таблицы вместо имени-строки-класса. Он может получить доступ к данным строк и столбцов, а также к индексам строк и столбцов. Вы должны иметь возможность настраивать классы и, следовательно, стиль для каждой отдельной ячейки.

Answer 2

Я не очень знаком с element ui, но почти такую ​​же проблему я решаю, добавляя имя-класса-строки в 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">