element el-table表格表头某一列表头字段修改颜色

需求:

1 使用 :header-cell-class-name="addClass" 属性

2 根据显示条件 在redText,whiteText 中设置你想要添加的必填表头index

3.根据条件修改文字样式

完整代码

html 复制代码
<el-table ref="tableRef" :cell-style="{ color: '#FFF', background: '#333' }"
      :header-cell-style="{ background: '#333' }" 
      :header-cell-class-name="addClass" 
      row-key="id" 
      :data="tableData"
      style="width: 100%" 
      :default-sort="{ prop: 'barcode.putInDate', order: 'descending' }" 
      @select="select"
      @select-all="selectAll" @sort-change="sortChange" :tree-props="{
        children: 'children',
        hasChildren: 'hasChildren',
      } ">
 </el-table>
javascript 复制代码
  methods: {
    addClass({ row, rowIndex, column, columnIndex }) {
      if (columnIndex == 2) {
        return "redText";
      } else {
        return 'whiteText'
      }
    },
 }
css 复制代码
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-table__header-wrapper th.redText {
  color: red;
}
::v-deep .el-table__header-wrapper th.whiteText {
  color: #fff;
}
</style>

实现


参考链接https://blog.csdn.net/weixin_47438917/article/details/127262354

相关推荐
夕水7 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin8 分钟前
js基础-数据类型
javascript
Winwin9 分钟前
哈?Boolean能作为回调函数?
javascript
我麻烦大了10 分钟前
实现一个简单的Vue响应式
前端·vue.js
Shartin13 分钟前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder17 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.25 分钟前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->27 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~29 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo30 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记