About customizing the style of a row in el-table in elementUI

Requirement: It is required to customize the line style through a certain line attribute

solve:

HTML：

<el-table :data="tableData" border class="table" ref="multipleTable" :row-class-name="tableRowClassName">

METHOD：

tableRowClassName({
 
            row,
 
            rowIndex
 
        }) {
 
            if (row.rank < 0) {
 
                return 'success-row';
 
            } else if (row.rank == 0) {
 
                return 'warning-row';
 
            }
 
            return '';
 
        }

CSS：

.el-table .success-row {
    color: red !important;
}
 
.el-table .warning-row {
    color: #34c934 !important;
}

PS: When setting css, scoped cannot be added

Reference article: https://blog.csdn.net/shichong123/article/details/102586417?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog -BlogCommendFromMachineLearnPai2-3.nonecase