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

最近用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>,否则你的样式可能会出不来哟。这样就大功告成啦，看看结果：