使用同事封装好的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 最后实现了
分类:
工作笔记√
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战