element-ui表格-设置表头样式-header-row-class-name

最新推荐文章于 2024-07-22 14:36:47 发布

weixin_45822022

最新推荐文章于 2024-07-22 14:36:47 发布

阅读量2.2w

点赞数 8

文章标签： css vue.js 前端

本文链接：https://blog.csdn.net/weixin_45822022/article/details/104781034

版权

本文介绍了在使用Element UI时遇到的多级表头和隔行换色问题的解决方法。通过`header-row-class-name`属性，实现了表头样式的自定义，解决了仅能改变表体行颜色的困扰。这是一个优雅地解决前端表格样式问题的实践案例。

摘要由CSDN通过智能技术生成

今天遇到了一个小小的问题，要实现如下效果
在这里插入图片描述
多级表头和隔行换色，捣鼓半天没弄好，问了一下群里的大佬，说是可以通过row-class-name给表格行添加类名解决，
官网demo：。按照demo的方法试了半天，没有效果，审查元素发现，类名加在了表体的tr中,按照下边的代码可以改变表体某一行的颜色。

.el-table>>> .success-row td {
    background: #edf6fb!important;
  }

但是，这样并没有解决问题啊，我是想改变两行表头的颜色啊，，，，又又又想了一个很俗气的办法，找到表头行的类手动添加样式，亲测有效

 /* /deep/.el-table /deep/thead>tr:first-child th{
      background: rgb(240,240,240)!important
  }
   /deep/.el-table /deep/thead>tr:last-child th{
      background-color: #edf6fb!important;
  } */

但但是，还是想找个不那么俗气的方法，接着去官网找，发现还有一个带header的属性header-row-class-name，直接贴代码了