el-table 修改多级表头背景色

就是一只小小白

于 2023-01-15 00:45:50 发布

阅读量5.4k

点赞数 8

分类专栏：组件库文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/weixin_68878908/article/details/128680580

版权

组件库专栏收录该内容

1 篇文章

订阅专栏

博客介绍了表格表头背景色的设置方法，可利用组件自带属性header-row-style完成，且强调不要全局设置表头颜色，因全局设置需加！important无法覆盖。若项目有其他表格要设置背景色，可在el-table中添加:header-cell-style=\{background:'#fffaee'}\。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图：

利用组件自带属性header-row-style来完成。注意一定不要全局设置表头颜色，因为全局设置必须加！important，这样我们就无法覆盖了。

若项目有其他表格要设置背景色，可以通过在el-table中添加这句话就可以了，一行代码也不费劲，:header-cell-style="{background:'#fffaee'}"

 <el-table ref="dateTable" :data="tableData" :header-cell-style="tableHeaderColor" border stripe>

 // 修改表头颜色
    tableHeaderColor ({ rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return { background: '#fffaee' }
      } else if (rowIndex === 0 && columnIndex !== 0) {
        return { background: '#FFBD7C', border: '0' }
      } else {
        return { background: '#fffaee' }
      }
    },

好啦，就酱紫吧，拜拜~~~~