el-table 修改表头样式 根据条件改变整行的颜色

1.修改表头样式-css实现

::v-deep .el-table th {
  text-align: center;
  background-color: #fff !important;
  border-color: "#0F9FFF" !important;
  color: #000 !important;
}

3.根据条件改变整行颜色

1）el-table标签添加:row-style属性

<el-table :cell-style="{borderColor:'#0F9FFF'}"
 border
 :data="roleList"
 :row-style="changRed">

2)methods中添加对应方法

    changRed ({ row }) {
      console.log(row, 'hang');
      if (row.type == "1") { // 变颜色的条件
        return {
          background: "#00CC66"// 这个return的就是样式 可以是color 也可以是backgroundColor
        }
      } else if (row.type == '2') {
        return {
          background: "#FFCC66"  // 这个return的就是样式 可以是color 也可以是backgroundColor
        }
      } else if (row.type == '3') {
        return {
          background: "#00CCFF"  // 这个return的就是样式 可以是color 也可以是backgroundColor
        }
      } else if (row.type == '4') {
        return {
          background: "#99CCFF"  // 这个return的就是样式 可以是color 也可以是backgroundColor
        }
      }
    },

我的是后端给了个属性type，根据属性值改变整行的颜色

1是绿色

2是黄色

3是深蓝

4是浅蓝

最终样式：type为1的有1行，为2的有三行，为3的有2行，为4的有7行

当我们设置了颜色后想取消鼠标移入改变当行颜色的话需要添加一个样式

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent;
}