el-table 自定义表头颜色

devtools/2025/1/12 14:11:17/

第一种方法:计算属性

javascript"><template><div><el-table:data="formData.detail"border stripehighlight-current-row:cell-style="{ 'text-align': 'center' }":header-cell-style="headerCellStyle"><el-table-column fixed prop="id" label="序号" width="80px" type="index"/><el-table-column prop="partCode" label="编码" width="120px"/><el-table-column prop="name" label="名称"/><el-table-column prop="spec" label="规格"/><el-table-column prop="partStuff" label="材质"/><el-table-column prop="partUnit" label="单位"/><el-table-column prop="batchNumber" label="批次号" /><el-table-column prop="number" label="数量" /></el-table></div></template><script>const formData = ref([])const headerCellStyle = ({ column, $index }) =>{let style = {background: '#b7babd',color: '#1e1f22',height: '35px','text-align': 'center'};if (column.property == 'batchNumber' || column.property == 'number' ) {style.background = '#e7c265';}return style;
}</script>

第二种方法:深度样式

javascript"><template><div><el-table:data="formData.detail"border stripehighlight-current-row:cell-style="{ 'text-align': 'center' }":header-cell-style="{background: '#b7babd',color: '#1e1f22',height: '35px','text-align': 'center'}"><el-table-column fixed prop="id" label="序号" width="80px" type="index"/><el-table-column prop="partCode" label="编码" width="120px"/><el-table-column prop="name" label="名称"/><el-table-column prop="spec" label="规格"/><el-table-column prop="partStuff" label="材质"/><el-table-column prop="partUnit" label="单位"/><el-table-column prop="batchNumber" label="批次号" :header-cell-class-name="'custom-header-class'"/><el-table-column prop="number" label="数量" /></el-table></div></template><script>const formData = ref([])const headerCellStyle = ({ column, $index }) =>{let style = {background: '#b7babd',color: '#1e1f22',height: '35px','text-align': 'center'};if (column.property == 'batchNumber' || column.property == 'number' ) {style.background = '#e7c265';}return style;
}</script><style scoped>/* 使用 :deep() 确保样式能穿透到子组件 */.el-table-style :deep(.custom-header-class) {background: #a1884b !important; /* 使用 !important 提高优先级 */color: #1e1f22;height: 35px;text-align: center;}
</style>

效果:


http://www.ppmy.cn/devtools/149885.html

相关文章

RabbitMQ 在 Go 中的核心方法详解

在使用 RabbitMQ 时,ExchangeDeclare、QueueDeclare、QueueBind 和 Consume 是四个非常重要的方法。它们分别用于声明交换机、声明队列、绑定队列到交换机以及消费消息。下面我们将详细讲解这些方法的参数及其作用。 1. ExchangeDeclare:声明交换机 ExchangeDeclare 用于声明…

【Pandas】pandas Series rsub

Pandas2.2 Series Binary operator functions 方法描述Series.add()用于对两个 Series 进行逐元素加法运算Series.sub()用于对两个 Series 进行逐元素减法运算Series.mul()用于对两个 Series 进行逐元素乘法运算Series.div()用于对两个 Series 进行逐元素除法运算Series.true…

机器学习之过拟合和欠拟合(二)

在机器学习中,过拟合和欠拟合是模型训练中常见的两种问题,它们反映了模型对数据的拟合程度及泛化能力的不足或过剩。 1. 什么是过拟合和欠拟合? 过拟合(Overfitting) 定义:模型对训练数据的学习过于深入,以至于连数据中的噪声或细节都被学到了,导致模型复杂度过高,泛…

使用sklearn训练语种识别模型

分析&#xff1a; 训练语种识别模型使用的是sklearn的MultinomialNB方法&#xff0c;MultinomialNB是一种基于贝叶斯定理的分类算法&#xff0c;特别适用于处理具有离散特征的分类问题&#xff0c;如文本分类中的单词计数。它属于朴素贝叶斯算法的一种&#xff0c;主要应用于高…

leetcode_2816. 翻倍以链表形式表示的数字

2816. 翻倍以链表形式表示的数字 - 力扣&#xff08;LeetCode&#xff09; 搜先看到这个题目 链表的节点那么多 已经远超longlong能够表示的范围 那么暴力解题 肯定是不可以的了 我们可以想到 乘法运算中 就是从低位到高位进行计算 刚开始 我想先反转链表 然后在计算 然后在进…

(九)大语言模型交互中的角色定义与区分

&#x1f4e2;&#x1f4e2;&#x1f4e2; 大家好&#xff0c;我是云楼Yunlord&#xff0c;CSDN博客之星人工智能领域前三名&#xff0c;多年人工智能学习工作经验&#xff0c;一位兴趣稀奇古怪的【人工智能领域博主】&#xff01;&#xff01;&#xff01;&#x1f61c;&#…

React项目中利用json-server实现数据Mock

json-server实现数据Mock 项目中安装json-server npm i -D json-server --legacy-peer-deps准备一个json文件 建立一个server文件夹&#xff0c;建立一个data.json文件。 以下为一个例子&#xff1a; {"ka": [{"type": "pay","money&qu…

【Rust自学】11.9. 单元测试

喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文&#xff09;&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.9.1. 测试的分类 Rust把测试分为两类&#xff0c;一个是单元测试&#xff0c;一个是集成…