vue2使用el-table更改表格单选高亮颜色

官网颜色

项目经理觉得选中颜色太浅，需要加深。然后我就开始了加深颜色之路……

• 表格准备： 表格的父级增加一个class, 表格加上highlight-current-row属性

• 通过浏览器，找到高亮的样式 .el-table__body tr.current-row>td.el-table__cell

• 想着直接加上deep就好了，草草加上代码

  <style scoped lang="less">
  .body-box {
    ...
    .page-right{
      ...
      .slectTable{
       ...
        /deep/  .el-table__body tr.current-row>td.el-table__cell {
          background-color: #157df0 ;
          color: #fff;
        } 
      }
    }
  }
  </style>
  

  不出意外的话意外来了，结果毫无变化

加上 `!important`也无果

• 最后，绞尽脑汁，多番尝试，终于终于得到了满意的答案，另起style标签 不用scoped

   .slectTable .el-table__body tr.current-row>td.el-table__cell {
      background-color: #157df0 !important;
      color: #fff;
    }
  

  

  但是不用scoped很可能会污染全局，建议使用时在表格父级增加class控制一下，类似这里的slectTable

• 后来又多番尝试，还是想使用scoped。终于找到了解决方案，在<style scoped lang="less">的最外层写样式也是能满足要求的，具体原因不详，有知道的大佬欢迎留言哦

  /deep/ .slectTable .el-table__body tr.current-row>td.el-table__cell {
      background-color: #157df0 ;
      color: #fff;
    }
  

小结：

方案1：直接在style标签中使用如下代码

<style>
  .slectTable .el-table__body tr.current-row>td.el-table__cell {
    background-color: #157df0 ;
    color: #fff;
  }
</style>

方案2：在<style scoped lang="less">的最外层使用/deep/

<style scoped lang="less">
.body-box {
  ...
}
 /deep/ .slectTable .el-table__body tr.current-row>td.el-table__cell {
    background-color: #157df0 ;
    color: #fff;
  }
</style>

如果上诉方案不行，建议通过浏览器找到控制高亮的样式后使用上述2种方案加上 !important尝试