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 服务发生了重启或者是宕机&…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南 在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
鸿蒙（HarmonyOS5）实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架，实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...