element el-table表格表头某一列表头文字或者背景修改颜色

 效果如下

整体代码 ,具体方法在最下面!

    <el-table v-loading="listLoading" :data="sendReceivList"  element-loading-text="Loading" border fit ref="tableList"  :header-cell-class-name="addClass"  
      highlight-current-row @selection-change="handleSelectChange" :row-key="getRowKey">
   
    <el-table-column label="单位" align="center" width="60px">
        <template slot-scope="scope">
          <div>{{ scope.row.unit }}</div>
        </template>
      </el-table-column>
      
      <el-table-column label="期初结存" align="center"  >
      <el-table-column label="数量" align="center"   >
        <template slot-scope="scope">
          <div>{{ scope.row.preNum }}</div>
        </template>
      </el-table-column>
       <el-table-column label="平均单价" align="center"   >
        <template slot-scope="scope">
          <div>{{ scope.row.prePrice }}</div>
        </template>
      </el-table-column>
       <el-table-column label="金额" align="center"   >
        <template slot-scope="scope">
          <div>{{ scope.row.preUnitPrice }}</div>
        </template>
      </el-table-column>
      </el-table-column>
   <el-table-column label="本期入库" align="center"  >
      <el-table-column label="数量" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.rkNum }}</div>
        </template>
      </el-table-column>
       <el-table-column label="平均单价" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.rkUnitPrice }}</div>
        </template>
      </el-table-column>
       <el-table-column label="金额" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.rkPrice }}</div>
        </template>
      </el-table-column>
      </el-table-column>
     <el-table-column label="本期出库" align="center"  >
      <el-table-column label="数量" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.ckNum }}</div>
        </template>
      </el-table-column>
       <el-table-column label="平均单价" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.ckUnitPrice }}</div>
        </template>
      </el-table-column>
       <el-table-column label="金额" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.ckPrice }}</div>
        </template>
      </el-table-column>
      </el-table-column>
     <el-table-column label="期末结余" align="center"  >
      <el-table-column label="数量" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.postNum }}</div>
        </template>
      </el-table-column>
       <el-table-column label="平均单价" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.postPrice }}</div>
        </template>
      </el-table-column>
       <el-table-column label="金额" align="center"  >
        <template slot-scope="scope">
          <div>{{ scope.row.postUnitPrice }}</div>
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="出入库流水" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="jumpClick"   size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

主要看这!!!

<el-table :data="sendReceivList"  :header-cell-class-name="addClass"  
 methods: {
 
  addClass({ row, rowIndex, column, columnIndex }) {
      if (column.label == '数量'||column.label == '平均单价'||column.label == '金额') {
        return "whiteColor";
      } else {
        return 'huiColor'
      }
    },
  },


<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-table__header-wrapper th.whiteColor {
  background-color: white !important;
  color: red;
}
::v-deep .el-table__header-wrapper th.huiColor {
  background-color: #F5F7FA !important;
}

</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/648740.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大模型应用之基于Langchain的测试用例生成

一 用例生成实践效果 在组内的日常工作安排中&#xff0c;持续优化测试技术、提高测试效率始终是重点任务。近期&#xff0c;我们在探索实践使用大模型生成测试用例&#xff0c;期望能够借助其强大的自然语言处理能力&#xff0c;自动化地生成更全面和高质量的测试用例。 当前…

延迟重平衡优化(Deferred Re-balancing Optimization Schedule)

DRW 论文代码 elif args.train_rule DRW:train_sampler Noneidx epoch // 160betas [0, 0.9999]effective_num 1.0 - np.power(betas[idx], cls_num_list)print(f"\neffective_num:{effective_num}")per_cls_weights (1.0 - betas[idx]) / np.array(effective…

【stm32/CubeMX、HAL库】嵌入式实验六:定时器(2)|PWM输出

参考&#xff1a; 【【正点原子】手把手教你学STM32CubeIDE开发】 https://www.bilibili.com/video/BV1Wp42127Cx/?p13&share_sourcecopy_web&vd_source9332b8fc5ea8d349a54c3989f6189fd3 《嵌入式系统基础与实践》刘黎明等编著&#xff0c;第九章定时器&#xff0c…

更适合国内的远程访问方法:自建根服务器基于节点小宝虚拟内网

网盘限速&#xff1f;异地出差忘文件&#xff1f;出差异地办公&#xff0c;访问公司OA、ERP、CRM系统、文件服务器等&#xff0c;快速组建个人局域网&#xff0c;家庭影院共享&#xff0c;享受高质量的视听体验。等等这样的场景&#xff0c;稳定靠谱的远程访问能力显得就更加至…

VGG论文解析—Very Deep Convolutional Networks for Large-Scale Image Recognition

VGG论文解析—Very Deep Convolutional Networks for Large-Scale Image Recognition -2015 研究背景 大规模图像识别的深度卷积神经网络 VGG&#xff08;牛津大学视觉几何组&#xff09; 认识数据集&#xff1a;ImageNet的大规模图像识别挑战赛 LSVRC-2014&#xff1a;Image…

FreeRTOS队列之向队列发送消息

本篇文章记录我学习FreeRTOS队列相关的知识&#xff0c;主要是关于向队列发送消息的部分。 一、函数原型 创建好队列以后就可以向队列发送消息了,FreeRTOS提供了8个向队列发送消息的API函数。 1、函数xQueueSend()、xQueueSendToBack()和xQueueSendToFront() 这三个函数都是用于…

windows11下,使用工具验证下载的iso文件完整性

windows11下&#xff0c;要验证下载的iso文件是否正常&#xff0c;可以使用工具生成md5值&#xff0c;再与下载源提供的md5值进行比较&#xff0c;相同&#xff0c;说明下载的正常。 命令如下&#xff1a; certutil -hashfile iso文件名 md5 如下面的例子&#xff0c;生成d…

java nio FileChannel堆内堆外数据读写全流程分析及使用(附详细流程图)

这里是小奏,觉得文章不错可以关注公众号小奏技术 背景 java nio中文件读写不管是普通文件读写&#xff0c;还是基于mmap实现零拷贝&#xff0c;都离不开FileChannel这个类。 随便打开RocketMQ 源码搜索FileChannel 就可以看到使用频率 kafka也是 所以在java中文件读写FileCh…

高奇琦:从大国协调到全球性机制:人工智能大模型全球治理路径探析

内容提要 人工智能大模型全球治理的关键是对大模型进行科学分类。大模型可以分为超大模型和一般模型。对于超大模型的治理&#xff0c;可以参考核武器治理的思路&#xff0c;重点是实现超大模型的有限发展和不扩散。对于一般模型而言&#xff0c;要在安全可控的基础上发挥其对…

昂达固态硬盘数据恢复方法:全面解析与操作指南

在数字化时代&#xff0c;数据已经成为我们生活和工作中不可或缺的一部分。而固态硬盘&#xff08;SSD&#xff09;由于其读写速度快、抗震性强等优点&#xff0c;慢慢取代了传统的机械硬盘&#xff0c;成为我们存储数据的主要选择。然而&#xff0c;即便再先进的存储设备&…

OrangePi AIpro初体验之图片视频检测案例真实测评

OrangePi AIpro简介 OrangePi AIpro官网 Orange Pi AI Pro 开发板是香橙派联合华为精心打造的高性能AI 开发板&#xff0c;其搭载了昇腾AI 处理器&#xff0c;可提供8TOPS INT8 的计算能力&#xff0c;内存提供了8GB 和16GB两种版本。可以实现图像、视频等多种数据分析与推理…

网页提示“非私密连接”是为什么?

网页提示“非私密连接”&#xff08;英文提示可能是 "Your connection is not private" 或 "Your connection is not secure"&#xff09;主要是因为浏览器无法验证你正试图访问的网站的SSL/TLS证书&#xff0c;或者是证书存在问题&#xff0c;从而无法建立…

【机器学习】机器学习在信息安全领域中的典型应用

&#x1f680;&#x1f680;&#x1f680;传送门 &#x1f512;机器学习在信息安全领域中的典型应用&#x1f4d5;利用机器学习检测恶意行为并阻断攻击&#x1f308;使用机器学习分析移动终端安全状况⭐借助机器学习提高信息安全分析水平&#x1f3ac;依靠机器学习自动完成重复…

javaEE—图书管理系统(基础代码版)

前言&#xff1a; 本篇博客是集合了javaEE所学的知识构建的一个基础框架&#xff0c;讲述着面向对象的过程是如何做到多对象交互协作完成框架的构建的。利用了数组&#xff0c;接口&#xff0c;类和对象&#xff0c;抽象类&#xff0c;Object类等知识来完成。 后续会加入数据…

钕铁硼表面磷化处理

大家都知道烧结钕铁硼易氧化、易腐蚀&#xff0c;日久将造成磁性能的衰减甚至丧失&#xff0c;所以使用前必须进行严格的防腐处理。在之前的文章中已经向大家介绍过与烧结钕铁硼表面处理相关的知识和电镀的工艺流程&#xff0c;除了电镀之外&#xff0c;钕铁硼表面处理还可采用…

zstd库数据压缩与解压缩

在 Visual Studio 2019 中使用 C 的 zstd 库进行数据压缩与解压缩 在今天的博客中&#xff0c;我们将探讨如何在 Visual Studio 2019 中使用 zstd 库进行高效的数据压缩和解压缩。zstd&#xff08;也称为 Zstandard 或 zstd&#xff09;是由 Facebook 开发的开源压缩库&#x…

数据结构中树的一些基本概念

前言&#xff1a;带你认识二叉树从基本概念开始&#xff0c;步步深入。 目录 树的概念和其中比较重要的基本概念 对概念的深度解析&#xff1a; 树的结构应该如何实现呢&#xff1f; 树的分类&#xff1a; 完全二叉树与满二叉树&#xff1a; 树的概念和其中比较重要的基本…

嵌入式进阶——数码管

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 数码管结构移位寄存器原理图移位寄存器数据流程移位寄存器控制流程移位寄存器串联实现数码管显示 数码管结构 共阴与共阳 共阳数码…

Java SE基础知识(11)

知识梳理&#xff1a; 记不住就看API帮助文档中的pattern类 开发过程中&#xff0c;正则表达式一般不自己写&#xff0c;安装插件any-rule 选择自己想要的正则表达式格式&#xff0c;稍作修改即可

科学提效|AI融入零售业,未来零售的创新之旅

零售业正经历着由人工智能&#xff08;AI&#xff09;引领的转型浪潮。AI在零售和消费品&#xff08;CPG&#xff09;行业的应用前景广阔&#xff0c;它正以多种创新方式重塑行业的运作模式。且随着技术的不断进步&#xff0c;AI在零售业的应用将变得更加广泛和深入。AI不仅能够…