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 服务发生了重启或者是宕机&…...
Windows下运行Redis并设置为开机自启的服务
下载Redis-Windows 点击redis-windows-7.4.0下载链接下载Redis 解压之后得到如下文件 右键install_redis.cmd文件，选择在记事本中编辑。 将这里改为redis.windows.conf后保存，退出记事本，右键后选择以管理员身份运行。 在任务管理器中能够…...
Ubuntu 25.10 将默认使用 sudo-rs
非盈利组织 Trifecta Tech Foundation 报告，Ubuntu 25.10 将默认使用它开发的 sudo-rs——用内存安全语言 Rust 开发的 sudo 实现。 Ubuntu 25.10 代号 Questing Quokka，预计将于 2025 年 10 月释出，是一个短期支持版本。Sudo-rs 是 Trifect…...
牛客小白月赛113
前言：这场的E题补的我头皮都发麻了。 A. 2025 题目大意：一个仅有‘-’‘*’组成的字符串，初始有一个sum 1， 从左到右依次遍历字符串，遇到-就让sum--；遇到*就让sum* 2，问sum有没有可能大于等于…...
Vue3（ref与reactive）
一，ref创建_基本类型的响应式数据 在 Vue 3 中，ref是创建响应式数据的核心 API 之一 ** ref的基本概念** ref用于创建一个可变的响应式数据引用，适用于任何类型的值（基本类型、对象、数组等）。通过ref包装的值会被转…...
【算法深练】分组循环：“分”出条理，化繁为简
目录 引言 分组循环 2760. 最长奇偶子数组 1446. 连续字符 1869. 哪种连续子字符串更长 2414. 最长的字母序连续子字符串的长度 3456. 找出长度为 K 的特殊子字符串 1957. 删除字符使字符串变好 674. 最长连续递增序列 978. 最长湍流子数组 2110. 股票平滑下跌阶段的…...
关于scrapy在pycharm中run可以运行，但是debug不行的问题
关于scrapy在pycharm中run模式可以运行，但是debug模式不行的问题 文章目录 关于scrapy在pycharm中run模式可以运行，但是debug模式不行的问题查了下原因 点击run就可以运行，但是debug就是运行不了 一点击debug就报这个错，也不知道啥…...
React进阶：状态管理选择题
React进阶：状态管理选择题 引言 随着React应用复杂度增加，选择合适的状态管理方案成为我们面临的关键决策。 状态管理本质上是解决"谁来存储数据"以及"如何更新和分发这些数据"的问题。在React生态中，随着应用规模扩大…...
物联网协议之MQTT（一）基础概念和设备
前言： 本文内容均以实战出发，像MQTT概念这种基础内容建议大家自行百度。 推荐资料： mica-mqtt文档 一、MQTT简单介绍 作为当今物联网的主流协议，MQTT的使用范围非常广，如果你想了解甚至是从事物联网行业，…...
15个基于场景的 DevOps 面试问题及答案
第一部分：持续集成和部署 (CI/CD) 场景 1：构建中断 “您的 CI 流水线突然出现‘找不到依赖项’的错误。您会如何处理这个问题？” 回答：首先，我会检查是否有新的依赖项被添加到需求文件中，但这些依赖项并未包含在需求文件中。我还会验证构建服务器是否可以访问互联网来下…...
数据结构（7）—— 二叉树（1）
目录 前言 一、 树概念及结构 1.1树的概念 1.2树的相关概念 1.3数的表示 1.二叉树表示 2.孩子兄弟表示法 3.动态数组存储 1.4树的实际应用 二、二叉树概念及结构 2.1概念 2.2特殊的二叉树 1.满二叉树 2. 完全二叉树 2.3二叉树的性质 2.4二叉树的存储结构 1.顺序存储 2.链式存储…...