关于elementUI中el-table自定义某一行的样式

需求：要求通过某行属性，自定义设置改行样式

解决：

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：设置css时，不可添加scoped

参考文章：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