elementui 单元格添加样式的两种方法
方法一
<el-table-column fixed prop="name" label="姓名" width="120">
<<template scope="scope">
<span :class="{red:scope.row.color==1,yell:scope.row.color==2,green:scope.row.color==3}">{{scope.row.name}}</span>
</template>
</el-table-column>
方法二
el-table标签上添加:cell-class-name="classmeth"。
<el-table :data="tableData3" height="250" border style="width: 100%" :cell-class-name="classmeth">
classmeth({
row,
column,
rowIndex,
columnIndex
}) {// console.log(row, column, rowIndex, columnIndex)
if (row.color === 1 && columnIndex == 1) {
return 'red'
}
},
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><!-- <script src="/utility/lzmain.js"></script><script src="/utility/lzmain-form.js"></script> --><!-- 引入ele --><link rel="stylesheet" href="../js/vue/index.css"><style>/*滚动条的宽度划过时变大*//*#region************浏览器默认滚动条通用google滚动条*/::-webkit-scrollbar {width: 10px;height: 10px;background-color: rgba(255, 255, 255, 0.01);}::-webkit-scrollbar-track {-webkit-box-shadow: none;border-radius: 10px;background-color: rgba(0, 0, 0, 0);}::-webkit-scrollbar-thumb {border-radius: 10px;background-color: rgba(0, 0, 0, 0.05);}*::-webkit-scrollbar:hover {transition: all 0.25s ease 0s, width 0.1s ease 0.15s, height 0.1s ease 0.15s;}*:focus::-webkit-scrollbar-thumb,*:hover::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.25);-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);}/* 表头样式 */.has-gutter .cell {font-weight: 600;}.el-table th.el-table__cell>.cell {color: #555;}/* 字体颜色 */.yell {color: yellow;}.green {color: green;}.red {color: red;}</style><body><div id="data"><div class="table-div"><el-table :data="tableData3" height="250" border style="width: 100%" :cell-class-name="classmeth"><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column fixed prop="name" label="姓名" width="120"><!-- 方法一--><!-- <template scope="scope"><span :class="{red:scope.row.color==1,yell:scope.row.color==2,green:scope.row.color==3}">{{scope.row.name}}</span></template> --></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column></el-table></div><div class="model-div el-popover">111</div></div><script src="../js/vue/vue.js"></script><!-- 放在最下面 --><script src="../js/vue/ele-index.js"></script><script>new Vue({el: '#data',data() {return {tableData3: [{color: 1,date: '2016-05-03',name: '王小虎1',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,}, {color: 1,date: '2016-05-02',name: '王小虎3',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 3,date: '2016-05-04',name: '王小虎4',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 1,date: '2016-05-01',name: '王小虎5',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 3,date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 2,date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {color: 2,date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}},methods: {//方法2classmeth({row,column,rowIndex,columnIndex}) {// console.log(row, column, rowIndex, columnIndex)if (row.color === 1 && columnIndex == 1) {return 'red'}},},})</script></body></html>相关文章：
elementui 单元格添加样式的两种方法
方法一 <el-table-column fixed prop"name" label"姓名" width"120"> <<template scope"scope"> <span :class"{red:scope.row.color1,yell:scope.row.color2,green:scope.row.col…...
如何有效管理技术债务：IT项目中的长期隐患
如何有效管理技术债务：IT项目中的长期隐患 在软件开发和IT项目管理中，技术债务（Technical Debt）是一个经常被忽视却又至关重要的概念。技术债务就像金融债务一样，当我们在项目开发中选择了某些“捷径”来快速交付&…...
2024 “华为杯” 中国研究生数学建模竞赛（D题）深度剖析|大数据驱动的地理综合问题|数学建模完整代码+建模过程全解全析
当大家面临着复杂的数学建模问题时，你是否曾经感到茫然无措？作为2022年美国大学生数学建模比赛的O奖得主，我为大家提供了一套优秀的解题思路，让你轻松应对各种难题！ CS团队倾注了大量时间和心血，深入挖掘解…...
Linux 清空redis缓存及查询key值
1.登录redis redis-cli -h 127.0.0.1 -p 6379# 如果有密码需要下面这一步 auth 你的密码直接带密码登录 redis-cli -h 127.0.0.1 -p 6379 -a 密码出现ok表示登录成功 2.标题查看所有key keys *3.查看某个key 的值 get keyName4.清空整个Redis服务器的数据 flushall5.查看…...
MySql调优（三）Query SQL优化（2）explain优化
explain执行计划出现以下情况，均需要优化： 一、Using temporary 查询执行过程中出现Using temporary提示，通常意味着MySQL需要创建一个临时表来存储中间结果。这种情况多发生在数据库优化器无法通过现有的索引直接有效地执行查询时…...
Java【代码 18】处理Word文档里的Excel表格数据（源码分享）
处理Word文档里的Excel表格数据 1.原始数据2.处理程序2.1 识别替换表格表头2.2 处理多余的换行符2.3 处理后的结果 3.总结 1.原始数据 Word 文档里的 Excel 表格数据，以下仅为示例数据： 读取后的字符串数据为： "姓名\r\n身份证号\r\n手…...
21、Tomato
难度 低(个人认为中) 目标 root权限 一个flag 使用VMware启动 kali 192.168.152.56 靶机 192.168.152.66 信息收集 端口信息收集 可以看到有个ftp服务，2211实际是ssh协议端口，80、8888是一个web服务 web测试 80端口显示一个tomato 查看源码给了一些…...
代码随想录 八股文训练营40天总结
参加训练营的话也是给自己一定的约束力，让自己能够定期去对八股文进行一个背诵，虽然说中间有几天放假，没有进行打卡外，还是比较完整的坚持下来了。 从计算机网络--操作系统--MySQL--Redis--C基础，虽然这些知识都有看过…...
Debian 12上安装google chrome
当前系统：Debian 12.7 昨天在Debian 12.7上安装Google Chrome时，可能由于网络原因，导入公钥始终失败。 导致无法正常使用命令#apt install google-chrome-stable来安装google chrome; 解决办法： Step1.下载当前google chrome稳…...
Python | Leetcode Python题解之第405题数字转换为十六进制数
题目： 题解： CONV "0123456789abcdef" class Solution:def toHex(self, num: int) -> str:ans []# 32位2进制数，转换成16进制 -> 4个一组，一共八组for _ in range(8):ans.append(num%16)num // 16if not num:b…...
定位坐标系
定位坐标系是地理空间信息系统中用于确定物体位置的重要工具，它基于数学和物理原理，通过一系列参数来描述物体在地球或其他天体表面的位置。以下是对定位坐标系的详细解析： 一、定义与分类 定位坐标系是根据一定的规则和方法，将…...
安全通信网络等保
通用要求 1.网络架构 1）应保证网络设备的业务处理能力满足业务高峰期需要。 设备CPU和内存使用率的峰值不大于设备处理能力的70%。 在有监控环境的条件下，应通过监控平台查看主要设备在业务高峰期的资源（CPU、内存等）使用 情况；在无监控环境的情况下，在业务高峰期登录…...
7--SpringBoot-后端开发、原理详解（面试高频提问点）
目录 SpringBoot原理 起步依赖 自动配置 配置优先级 Bean设置 获取Bean 第三方Bean SpringBoot原理 内容偏向于底层的原理分析 基于Spring框架进行项目的开发有两个不足的地方： 在pom.xml中依赖配置比较繁琐，在项目开发时，需要自己去找…...
wordpress主题摘要调用显示错误解决办法
如果你的wordpress主题使用了 mb_strimwidth(strip_tags(apply_filters(the_content, $post->post_content)), 0, 360, …); 这样的方式调用内容摘要 如果在主题摘要调用的地方显示错误，导致这个错误的原因是php没有开启：mbstring 开启mbstring的…...
【ESP32】ESP-IDF开发 | UART通用异步收发传输器+串口收发例程
1. 简介 UART可以说是开发者使用得最多的外设之一了，打印log几乎都是使用串口来实现的。UART是一种异步全双工的通信方式，异步传输的特性使得它仅需2根线就可以完成全双工的传输，但这也要求发送端和接收端的速率、停止位、奇偶校验位等都要相…...
2025秋招LLM大模型多模态面试题（六）-KV缓存
目录 为什么Transformer推理需要KV缓存？KV缓存的具体实现 没有缓存的情况下使用缓存的情况下KV缓存在解码中的阶段划分 Prefil阶段Decoding阶段KV缓存的存储类型及显存占用计算KV缓存的局限与优化策略 超长文本与复杂模型场景下的瓶颈量化方案的应用量化方案的副作用与优化方法…...
matlab边缘点提取函数
1、边缘提取 matlab自带点云边缘提取函数，用于搜索点云边界，其核心是alpha shapes算法。alpha shapes提取边缘点，主要是依据滚动圆绕点云进行旋转，实现边缘检测，原理如下图所示。具体原理及效果，可以参考之前我写的博客：基于alpha shapes的边缘点提取（matlab）-CSDN博客…...
Redis 执行 Lua，能保证原子性吗？
前言 小张目前在使用分布式锁 Redisson 实现一个需求。那我在想我能否自己手撸一个能用于分布式环境的锁呢？于是果然尝试。 历经一天后，小张手撸的锁终于写出来了，再次给各位看看，看给位有没有什么优化的建议： // 加…...
让模型评估模型：构建双代理RAG评估系统的步骤解析
在当前大语言模型(LLM)应用开发的背景下,一个关键问题是如何评估模型输出的准确性。我们需要确定哪些评估指标能够有效衡量提示(prompt)的效果,以及在多大程度上需要对提示进行优化。 为解决这一问题,我们将介绍一个基于双代理的RAG(检索增强生成)评估系统。该系统使用生成代理…...
RabbitMQ 高级特性——发送方确认
文章目录 前言发送方确认confirm 确认模式return 退回模式 常见面试题 前言 前面我们学习了 RabbitMQ 中交换机、队列和消息的持久化，这样能够保证存储在 RabbitMQ Broker 中的交换机和队列中的消息实现持久化，就算 RabbitMQ 服务发生了重启或者是宕机&…...
Karp的21个NPC问题：从理论到实践的经典探索
1. Karp与NPC问题的历史背景 1971年，Stephen Cook在论文《The Complexity of Theorem Proving Procedures》中首次提出了NP完全性的概念，并证明了布尔可满足性问题（SAT）属于NP完全问题。这一突破性工作为计算复杂性理论奠定了基石…...
技术赋能B端拓客：号码核验行业的迭代升级与价值深耕，
在数字经济持续深耕的当下，B端市场的竞争逻辑已发生根本性转变，“粗放拓客”逐渐被“精准高效”取代，企业对拓客全流程的效率与成本管控提出了更高要求。号码核验作为B端拓客的前置核心环节，其作用远不止于简单的空号筛查…...
OpenCore Legacy Patcher完整指南：四步让老旧Mac免费升级最新macOS
OpenCore Legacy Patcher完整指南：四步让老旧Mac免费升级最新macOS 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为苹果官方停止支持的老旧…...
USB设备映射混乱？三招教你通过终端识别/dev/ttyUSB*对应的物理插槽
USB设备映射混乱？三招教你通过终端识别/dev/ttyUSB*对应的物理插槽 当你的工作台上同时连接着五个相同型号的温湿度传感器，系统却将它们随机分配为/dev/ttyUSB0到4时，那种抓狂的感觉每个物联网开发者都深有体会。上周调试智能农业大棚时&…...
Verilog仿真踩坑记：为什么你的测试用例‘通过’了，但电路其实是错的？（附X态检测代码）
Verilog仿真中的X态陷阱：如何避免“虚假通过”的致命错误 数字电路仿真中，最危险的场景莫过于测试结果显示“Passed”，但实际芯片却存在严重功能缺陷。这种“虚假通过”现象往往源于Verilog中X态（未知状态）的隐蔽特性…...
别只刷题了！用Python/C++搞定考研机试高频算法（附PIPIOJ真题代码重构与优化）
从暴力解法到优雅实现：Python/C双语言拆解考研机试高频算法 考研机试不仅考察算法理解，更检验工程化编码能力。许多考生能写出正确但冗长的代码，却在时间优化和代码简洁性上失分。本文将用Python和C对比实现六大高频题型，重点分析…...
Lingyuxiu MXJ LoRA开源镜像指南：从下载到生成的完整开箱即用流程
Lingyuxiu MXJ LoRA开源镜像指南：从下载到生成的完整开箱即用流程 1. 项目简介 Lingyuxiu MXJ LoRA 是一款专门为生成唯美真人风格人像而设计的轻量级AI图像生成系统。这个项目最大的特点就是针对人像摄影进行了深度优化，能够生成五官精致、光影柔和、…...
新手必看：在快马平台学习排列组合公式的代码实现
新手必看：在快马平台学习排列组合公式的代码实现 作为一个编程新手，当我第一次接触排列组合公式时，那些数学符号和递归逻辑让我一头雾水。直到在InsCode(快马)平台上找到了带详细注释的示例代码，才真正理解了Cn和An公式的实现原理…...
大模型小白入门指南：从工作原理到实用技巧（收藏版）
本文深入解析了大语言模型（LLM）的核心工作原理，包括Transformer架构的自注意力机制和位置编码，以及预训练和指令微调的训练范式。同时，文章还提供了实用的提示工程技巧，帮助读者更好地与AI协作。此外&#…...
 ViewEngine 深入解析与应用实例)
ASP.NET MVC 1.0 (五) ViewEngine 深入解析与应用实例
一.摘要 本文讲解ViewEngine的作用, 并且深入解析了实现ViewEngine相关的所有接口和类, 最后演示了如何开发一个自定义的ViewEngine. 本系列文章已经全部更新为ASP.NET MVC 1.0版本.希望大家多多支持! 二.承上启下 首先注意: 我会将大家在MVC之前一直使用的ASP.NET页面编程模…...