JeecgBoot(ant-design-vue) 识别字段中指定内容并修改该行文字颜色
需求:将生产工厂是配件工厂的行改变颜色标注
一、修改table组件内容
在<a-table></a-table>
内添加:rowClassName="tableRowClass"
<a-table>
...
:rowClassName="tableRowClass"
...
</a-table>
二、修改methods方法
在methods方法中添加tableRowClass方法,主要用于逻辑处理,判断该行是否需要改变颜色。其中factory是字段名称,如果是需要修改的行,则返回rowClass。
tableRowClass(record){
if(record.factory == '配件工厂'){
return "rowClass";
}else {
return "";
}
}
三、CSS添加rowClass
注意:rowClass不要写在
<style scoped></style>
里
<style>
.rowClass {
color: blue;
}
</style>
以上步骤都处理完后再运行就可以看到颜色已经改变: