elementUIのel-tableの行のスタイルのカスタマイズについて

要件:特定の線属性を使用して線のスタイルをカスタマイズする必要があります

解決する:

HTML:

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

方法:

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を設定する場合、スコープを追加できません

参考記事: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

おすすめ

転載: blog.csdn.net/weixin_40538702/article/details/109073870