element table 表头header-cell-style设置的表头不生效

只要加个!important就可以了,像这样。标点符合不能多写

header-cell-style是官网写的修改el-table表头样式的回调,且说header-row-style不生效也就罢了,header-cell-style也不生效是不是有点过分。

我抓耳挠腮的看了半天,最后手写了个样式进去,但还是气不过,把他改过来,最后在多次查资料(搜索)终于找到了原因,或许是表格父级元素使用了flex布局的原因,只要加个!important就可以了,像这样。

javascript 复制代码
   <el-table :data="tableData" border :style="{ width: width }" :height="height"
        :header-cell-style="tableHeaderCellStyle" 
        >
        <template v-for="(item, index) in tableHeader">
          <el-table-column v-if="item.label == '排序' || item.label == '排名'" :prop="item.prop" :label="item.label"
            :width="item.width" show-overflow-tooltip align="center">
            <template #default="scope">
              <span :style="getStyle(scope)">{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width" align="center"
            show-overflow-tooltip>
          </el-table-column>
        </template>
      </el-table>


// 修改 table header cell的背景色
const tableHeaderCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  let background = null
 
  if (rowIndex == 0) {
    props.tableHeader.map((item, index) => {
      if (columnIndex == index && item.background) {
        background = `${item.background} !important`
      }
    })
  }
  // return  { background: 'pink !important' } // 使用 backgroundColor
  // 如果有背景色,则返回一个样式对象
  if (background) {
    return { background: background };  // 使用 backgroundColor
  }
}
相关推荐
疯狂动物城在逃flash9 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子15 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生15 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
JohnYan15 分钟前
Bun技术评估 - 07 S3
javascript·后端·bun
Mintopia16 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆17 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周25 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i28 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
源码站~29 分钟前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
咚咚咚ddd30 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端