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