改变element中table某一行的字体颜色

忘是亡心i 2023-06-08 04:51 15阅读 0赞

最近用vue+element写管理平台的时候，领导要求某一行值大于多少的时候，字体变为红色，费了点功夫解决了，和大家分享一下，嘻嘻～

1.首先，el-table的标签里要加点东西,就是这个 :row-class-name="tableRowClassName"

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

2.当然就是实现 tableRowClassName这个函数啦

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

实在不懂的话，把row, rowIndex打印出来看看呗。

3.在css里实现他的样式

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

这里要敲黑板啦， 使用vue的同学请注意：包裹着这一段css的标签是<style></style>,而不是<style scoped></style>,否则你的样式可能会出不来哟。这样就大功告成啦，看看结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz_size_16_color_FFFFFF_t_70]: /images/20230531/9fab9bdd450e4dadac41fd14ded03e15.png