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 服务发生了重启或者是宕机&…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
pam_env.so模块配置解析
在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块，负责验证用户身份&am…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...