How to map class to particular row cell in Element UI table based on condition?
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">
Have a look at cell-class-name table attribute instead of row-class-name. It can access row and column data and row and column indexes.You should be able to customize classes and therefore style to each individual cell.