修改el-table中某一行样式，解决修改样式无效的问题

需求

列表展示项目信息，其中，根据后端接口字段返回的项目状态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里面。

http://t.csdnimg.cn/sppTnhttp://t.csdnimg.cn/sppTn