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