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

依米_2023-11-28 16:23

官网颜色

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

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

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

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

xml 复制代码

<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>

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

go 复制代码

加上 `!important`也无果

最后，绞尽脑汁，多番尝试，终于终于得到了满意的答案，另起style标签不用scoped
css 复制代码
```
 .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">的最外层写样式也是能满足要求的，具体原因不详，有知道的大佬欢迎留言哦
css 复制代码
```
/deep/ .slectTable .el-table__body tr.current-row>td.el-table__cell {
    background-color: #157df0 ;
    color: #fff;
  }
```

小结：

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

xml 复制代码

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

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

xml 复制代码

<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尝试

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

小结：

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

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

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