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

news2024/11/15 18:48:50

 效果如下

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

    <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>

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

揭秘APP广告变现的高效秘诀:如何让你的APP更赚钱?

在数字化时代&#xff0c;APP已成为人们获取信息、娱乐休闲的重要平台。对于许多内容创作者来说&#xff0c;如何通过APP实现盈利&#xff0c;是一个亟待解决的问题。而APP广告变现项目&#xff0c;正是其中一种备受关注的盈利模式。那么&#xff0c;如何有效地利用APP广告变现…

安泰电子:功率放大器的选择方法有哪些

选择适合的功率放大器是实现电子系统中的关键步骤之一。以下是一些选择功率放大器的常用方法和考虑因素&#xff1a; 功率需求&#xff1a;首先确定你的系统需要多大的功率输出。功率输出需求通常由被驱动设备的功率要求决定。计算出所需功率后&#xff0c;选择一个具有适当功率…

绿色阅读:旧书回收,让知识循环

在快节奏的现代社会中&#xff0c;知识的获取和更新速度日新月异。然而&#xff0c;在这个信息爆炸的时代&#xff0c;我们是否曾想过&#xff0c;那些曾经陪伴我们度过无数日夜、给予我们智慧和启迪的旧书&#xff0c;在它们完成使命后&#xff0c;是否应该被遗忘在角落&#…

IdentiFace——多模态人脸识别系统,可捕捉从情绪到性别的所有信息及其潜力

1. 概述 面部识别系统的开发极大地推动了计算机视觉领域的发展。如今&#xff0c;人们正在积极开发多模态系统&#xff0c;将多种生物识别特征高效、有效地结合起来。 本文介绍了一种名为 IdentiFace 的多模态人脸识别系统。该系统利用基于 VGG-16 架构的模型&#xff0c;将人…

Go 语言安装部署(超详细版本)

在学习和使用 Go 语言时&#xff0c;正确的安装和配置是非常重要的一步。本文将介绍如何在不同操作系统上安装 Go 语言&#xff0c;并讨论一些常见的配置选项&#xff0c;帮助读者更好地了解和使用 Go 语言。无论是初学者还是有一定经验的开发者&#xff0c;都能从本文中获得有…

buuctf-相册

题目提示找到邮箱 下载是一个apk文件 他都不建议安装到手机了 我还是不找麻烦动调了吧 他说是mail,那行吧 找mail 找到就是这一段 base64 s3 notebook 这里可以看见加载了native库 所以要IDA 打开so文件 apk就是一个压缩包,直接解压就行 lib里面就有so文件 再根据熟知的…

深度剖析整型和浮点型数据在内存中的存储(C语言)

目录 整型在内存中的存储 为什么整型在内存中存储的是补码&#xff1f; 大小端字节序 为什么有大端小端&#xff1f; 浮点型家族 浮点数在内存中的存储 long long 整型在内存中的存储 整型在内存中有三种二进制表示形式&#xff1a;原码&#xff0c;反码&#xff0c;补码…

网站笔记:huggingface model memory calculator

Model Memory Utility - a Hugging Face Space by hf-accelerate 这个工具可以计算在 Hugging Face Hub上托管的大型模型训练和执行推理时所需的vRAM内存量。模型所需的最低推荐vRAM内存量表示为“最大层”的大小&#xff0c;模型的训练大约是其大小的4倍&#xff08;针对Adam…

Python-3.12.0文档解读-内置函数id()详细说明+记忆策略+常用场景+巧妙用法+综合技巧

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 详细说明 概述 参数 返回值 特性 实现细节&#xff08;CPython&#xff09; 安全…

M-G370PDG惯性测量单元,可实时监测天线的姿态和位置变化

动中通天线系统通常包括天线、卫星信号跟踪器、调制解调器、电源管理单元和用户终端设备等部分。其中&#xff0c;天线是系统的关键部件&#xff0c;负责接收和发送卫星信号。随着移动载体的运动&#xff0c;天线需要实时调整方向&#xff0c;以保持与卫星的稳定连接。卫星信号…

uniapp页面vue3下拉触底发送获取新数据请求实现分页功能

页面下拉触底获取新数据实现分页功能实现方式有两种&#xff0c;根据自己的业务需求来定&#xff0c;不同的方案适用场景不一样&#xff0c;有的是一整个页面下拉获取新数据&#xff0c;有的是部分盒子内容滚动到底部时候实现获取新数据&#xff0c;下面讨论一下两种方式的区别…

【Python数据分析】基于自回归积分滑动平均模型的疫情分析报告 附完整python代码

资源地址&#xff1a;Python数据分析大作业 2000字 图文分析文档 疫情分析完整python代码 数据分析 数据来自法国疫情数据 资源地址&#xff1a;Python数据分析大作业 2000字 图文分析文档 疫情分析完整python代码 代码详解 完整代码文件 主要是对时间序列数据进行分析和预…

python技巧梳理

背景 在开发中&#xff0c;经常会遇到&#xff0c;同时存在多个值&#xff0c;依次判断上述值&#xff0c;选择第一个非空、True的值作为整个表达式的值进行返回&#xff0c;这个时候会用到or这个关键词&#xff0c;下面讲一下用法。 方法 value1 None value2 0 value3 H…

韩顺平0基础学Java——第11天

p234-249 又一个月了&#xff0c;时间过得好快啊&#xff0c;希望支棱起来 可变参数 public int sum(int ... nums){ } 这个nums是数组 细节&#xff1a; 1可变参数可以为0个&#xff0c;或任意个 2可变参数的实参可以为数组 3可变参数的本质就是数组 4可变参数可以和普通…

群晖NAS安装web服务器和搭建PHP环境

文章目录 安装Web Station 和 PHP配置PHP配置新站点&#xff08;虚拟主机&#xff09;&#xff1a;配置nginx 安装MariaDB修改数据库配置配置远程连接远程连接 最近折腾了一台群晖NAS&#xff0c;并搭建了一套web服务器&#xff0c;关于其中的一些设置&#xff0c;和传统的Linu…

Linux应急响应思路和技巧:进程分析篇

前言 本文总结自网宿安全演武实验室安全应急响应团队日常工作实践&#xff0c;主要介绍在Linux服务器环境出现明确或疑似的被入侵表现之后&#xff0c;安全人员如何在服务器系统中确认入侵结果&#xff0c;执行入侵后的溯源取证、入口定位、行为还原、后门定位等工作&#xff…

大数据框架总结(全)

☔️ 大数据框架总结&#xff08;全&#xff09; 关注“大数据领航员”&#xff0c;在公众号号中回复关键字【大数据面试资料】&#xff0c;即可可获取2024最新大数据面试资料的pdf文件 一. Hadoop HDFS读流程和写流程 HDFS写数据流程 &#xff08;1&#xff09;客户端通过…

TypeScript 语言在不改变算法复杂度前提下,细节上性能优化,运行时性能提升效果明显吗?

有经验的专家写的代码&#xff0c;和无经验的新手写的代码&#xff0c;在运行时性能上大概会有多少差异&#xff1f; 个人感觉&#xff0c;常规业务逻辑代码通常可以差 1 倍&#xff1b;如果算上框架的影响&#xff0c;可以差 2~4 倍。 仅考虑业务代码的话&#xff0c;新手容易…

Python3 使用 pymssql 连接 SQL Server 报错:DB-Lib error message 20002, severity 9

一、版本说明 python版本&#xff1a; 3.12.1 pymssql版本&#xff1a; 2.3.0 # pymssql.version_info() SQL Server版本&#xff1a;SQL Server 2008 OS版本&#xff1a; rocky linux 9.4二、报错信息 Traceback (most recent call last):File "src/pymssql/_…

四大运营商大流量卡测评,手机卡,物联网卡,纯流量卡

买大流量卡&#xff0c;看4个方面 优惠时间。有的只是12个月&#xff0c;24个月有优惠【可以先用一年&#xff0c;然后注销】通用流量。而不是定向流量全国通话分钟数。而不是亲情通话分钟数销户方式。是否支持随时销户&#xff0c;异地销户&#xff0c;线上销户&#xff0c;额…