起因:
使用 element table
的时候,需要根据行数据(row
)里面的某个数据进行判断,根据数据不同,需要将当前行,改成不同的颜色。
解决方案:
el-table
的标签里要增加:row-class-name="rowStyle"
;rowStyle
是自己要写的判断函数,返回的是不同的class名,这个函数会自动传递当前行的数据.- 实现
rowStyle
函数: -
rowStyle({row, rowIndex}){ if(row.test > 0){ return 'success_class'; }else{ return 'error_class'; } return ''; }
- 最后就是写
success_class
和error_class
的CSS样式 -
.el-table .success_class { color: green; } .el-table .error_class { color: red; }