조건에 따라 클래스를 Element UI 테이블의 특정 행 셀에 매핑하려면 어떻게 해야 합니까?

조건에 따라 클래스를 Element UI 테이블의 특정 행 셀에 매핑하려면 어떻게 해야 합니까?

<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 UI 테이블 구성 요소를 사용하고 있습니다.마지막 열에 Appproved 또는 Rejected 텍스트 상태가 표시됩니다.

셀 값을 기반으로 특정 클래스를 특정 셀로 설정하려면 어떻게 해야 합니까?기본적으로 클래스는 빨간색이어야 하지만 상태 값이 Approved이면 클래스는 녹색이어야 합니다.

요소 ui에 대해서는 잘 모르지만 row-class-name을 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">

row-class-name 대신 cell-class-name 테이블 속성을 확인합니다.행 및 열 데이터와 행 및 열 인덱스에 액세스할 수 있습니다.클래스를 사용자 정의할 수 있어야 하며, 따라서 각 셀에 맞게 스타일을 지정할 수 있어야 합니다.

언급URL : https://stackoverflow.com/questions/51061250/how-to-map-class-to-particular-row-cell-in-element-ui-table-based-on-condition