使用同事封装好的table(使用el-table),修改表头背景色怎么实现

花了一下午时间 基本功还是比较差

参考博客1
首先,要修改表头颜色,需要el-table的属性:header-cell-style
可以这样写:
header-cell-style="{background:'#409EFF',color:'#409EFF'}"
而我有两个点需要考虑
1)只有部分表头需要修改颜色
2)同事封装的组件,对背景颜色使用了!important

解决1)
写函数:header-cell-style="cellStyle"
这里又有几个基本功不够导致的坑:

  • ({row,column,rowIndex, columnIndex}) 写这个的时候要带上{},否则row,column,rowIndex, columnIndex这些参数是undefined
  • return {background: 'red !important'}; 返回值需要是对象,不能直接返回数组
const cellStyle = ({row,column,rowIndex, columnIndex})=>{
    if(rowIndex===1 && (columnIndex >= 0 && columnIndex <= 7)){
        return {background: 'red !important'};
    }
}

解决2)
我尝试了在style中写选择器,但是都没有生效
最后还是使用header-cell-style="cellStyle",return {background: 'red !important'}; 在return的样式中加上!important 最后实现了

posted @   ayubene  阅读(851)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示