需求
列表展示项目信息,其中,根据后端接口字段返回的项目状态task_status,延期项目底色换成浅黄色,预警项目底色换成粉红色。
实现
① 在公共样式文件里面写好样式
.background-color-red {
background-color: #fadadaa1 !important;
}
.background-color-yellow {
background-color: #f5e6d2bd !important;
}
.background-color-white {
background-color: white;
}
②在js文件里面写个样式对应的map
// 任务状态颜色
export const TASK_STATUS_CLASS_ENUMS = {
1: 'background-color-red',
2: 'background-color-yellow',
3: 'background-color-white'
}
③在vue文件中导入公共样式文件和js文件
<!-- 注意!一定不能加scoped,否则无效 -->
<style lang="scss">
@import "~@/views/project/hardware/assets/commonStyle.scss";
</style>
import {
FIELD_ENUM,
TASK_STATUS_CLASS_ENUMS,
} from "@/views/project/hardware/assets/enums.js";
④在el-table中动态绑定row-class-name
:row-class-name="getRowClassName"
⑤在methods中写动态获取样式名的方法
// 获取行类
getRowClassName({ row, rowIndex }) {
const taskStatus = row[FIELD_ENUM.task_status];
return TASK_STATUS_CLASS_ENUMS[taskStatus];
},
问题
有个问题,一开始我是这么写的:
样式一直不生效,按F12检查了一下,class名称其实是有挂上去的,但是对应的样式却显示不出来!!!
解决方案
在网上找了方法,就是把样式放在纯净的style的标签下面,不能放在style scoped中。
但由于某个页面都有一些自己的样式,为了避免影响到其它地方,保守起见,我们不能草率地直接整个去掉scoped,而是分成两个style来写更加合理。
原因
问题根源:因为通过scoped
属性,可以使得组件之间的样式不互相污染,如果增加scoped上去之后,就没有办法再进行css样式的增加了。
好熟悉的bug!!!笔者赶紧翻了一下之前踩过的坑,发现好像只要涉及到需要更改表格某一行或者某个单元格的样式的,基本都要写在无scoped的style里面。