当前位置: 首页 > news >正文

el-table表格变更前后根据数据值改变背景颜色

需求:

1.左侧变更前表格数据不可以编辑,并且背景色加灰

2.右侧变更后表格数据可被编辑,编辑后变更前与变更后行数据不一致,添加背景色区分

3.点击删除的时候,给变更后表格当前行,添加背景色和删除的中横线

    <el-tableref="table":data="tableDataList"style="width: 100%; margin: 0 auto; font-size: 14px;"height="100%"align="center"row-key="node_code":row-class-name="tableRowClassName":cell-class-name="tableCellClassName"@cell-click="handleCellClick"><el-table-column align="center" label="操作" min-width="90" fixed="right"><template slot-scope="scope"><div><a class="mc" title="删除" @click="handleDel(scope.row)"><em slot="reference" class="el-icon-delete mc" style="cursor: pointer" /></a></div></template></el-table-column><el-table-column label="变更前"><el-table-column v-for="(item, index) in viewColumns" :key="index" :fixed="item.fixed" :prop="item.prop" :align="item.align" :label="item.label" :min-width="item.width" :show-overflow-tooltip="true"><template slot-scope="scope"><!-- <el-input v-if="scope.row.index == rowIndex && scope.column.index == columnIndex" v-model="scope.row[item.prop]" class="item__input" placeholder="请输入" @blur="handleBlur" /> --><div class="item__txt">{{ scope.row[item.prop] }}</div></template></el-table-column></el-table-column><el-table-column label="变更后" class="after_class"><!-- 变更前的数据是不可修改的,变更后的数据是可以被修改的 --><el-table-column v-for="(item, index) in viewColumnsTwo" :key="index" :fixed="item.fixed" :prop="item.prop" :align="item.align" :label="item.label" :min-width="item.width" :show-overflow-tooltip="true" class="after_class"><template slot-scope="scope" class="after_class"><el-input v-if="scope.row.index == rowIndex && scope.column.index == columnIndex" v-model="scope.row[item.prop]" class="item__input" placeholder="请输入" @blur="handleBlur" /><div v-else class="item__txt after_class">{{ scope.row[item.prop] }}</div></template></el-table-column></el-table-column></el-table>

数据值:

<script>
data() {return {
tableDataList:[],
//isEdit单元格控制是否可编辑viewColumns: [{ prop: 'topSymptomBefore', width: '120', align: 'center', label: '事项', fixed: false, isEdit: false },{ prop: 'controlItemBefore', width: '120', align: 'center', label: '管理项', fixed: false, isEdit: false },{ prop: 'controlStandardBefore', width: '120', align: 'center', label: '管理基准', fixed: false, isEdit: false },{ prop: 'remarkBefore', width: '120', align: 'center', label: '备注', fixed: false, isEdit: false}],// idAfter是当前数据的id,新增的时候 这个数据是viewColumnsTwo: [{ prop: 'topSymptomAfter', width: '120', align: 'center', label: '事项', fixed: false, isEdit: true },{ prop: 'controlItemAfter', width: '120', align: 'center', label: '管理项', fixed: false, isEdit: true },{ prop: 'controlStandardAfter', width: '120', align: 'center', label: '管理基准', fixed: false, isEdit: true },{ prop: 'remarkAfter', width: '120', align: 'center', label: '备注', fixed: false, isEdit: true }], }
}</script>

添加背景色处理:

 tableCellClassName({ row, column, columnIndex }) {// 把每一列的索引放到column里column.index = columnIndexif (row.colorFlag) {if ((column.property == 'topSymptomAfter' || column.property == 'controlItemAfter' || column.property == 'controlStandardAfter' || column.property == 'remarkAfter')) {return 'warning-row' // 返回被点击行的样式}}if (column.property == 'topSymptomBefore' || column.property == 'controlItemBefore' || column.property == 'controlStandardBefore' || column.property == 'remarkBefore') {return 'success-row' // 返回被点击行的样式}// 对比后的数据 不等于 对比前的数据,那么添加背景色if (column.property == 'topSymptomAfter' && (row.topSymptomAfter.toString() !== row.topSymptomBefore.toString())) {return 'fill-row'}if (column.property == 'controlItemAfter' && (row.controlItemAfter.toString() !== row.controlItemBefore.toString())) {return 'fill-row'}if (column.property == 'controlStandardAfter' && (row.controlStandardAfter.toString() !== row.controlStandardBefore.toString())) {return 'fill-row'}if (column.property == 'remarkAfter' && (row.remarkAfter.toString() !== row.remarkBefore.toString())) {return 'fill-row'}return '' // 返回其他行的默认样式},//删除行handleDel(row) {this.handleIdentification(row)// this.tableDataList = this.tableDataList.filter(item => item.index !== row.index)if (!(row.topSymptomBefore && row.controlItemBefore && row.controlStandardBefore && row.remarkBefore)) {row.colorFlag = false// 如果左侧没有数据值,只有右侧有数据值,点击删除 是删除整条数据this.tableDataList = this.tableDataList.filter(item => item.index !== row.index)}if ((row.topSymptomAfter || row.controlItemAfter || row.controlStandardAfter || row.remarkAfter)) {row.colorFlag = trueupdateMqs(this.addForm).then(res => {this.$message.success(res.msg)}).catch(res => {this.$message.error(res.msg)})}},
<style lang="scss" scoped>
::v-deep .el-table .warning-row{text-decoration: line-through;background-color: #f0f9eb;color: red
}
::v-deep .el-table  .success-row {background-color: #F0F0F0;}
::v-deep .el-table .fill-row{background-color: #F5F108;
}</style>

成果:

相关文章:

el-table表格变更前后根据数据值改变背景颜色

需求&#xff1a; 1.左侧变更前表格数据不可以编辑&#xff0c;并且背景色加灰 2.右侧变更后表格数据可被编辑&#xff0c;编辑后变更前与变更后行数据不一致&#xff0c;添加背景色区分 3.点击删除的时候&#xff0c;给变更后表格当前行&#xff0c;添加背景色和删除的中横…...

flask基础知识1

目录 1.介绍 2.体验一下 3.配置参数&#xff1a; 4.路由和URL 1.路由 2.动态路由&#xff1a; 自定义转换器&#xff1a; 3.使用自定义转换器 5.url_for函数 6.request参数 7.处理响应&#xff1a; 1.重定向&#xff1a; 2.返回json数据&#xff1a; 3.返回模板&…...

第8天:Django Admin高级配置

第8天&#xff1a;Django Admin高级配置 目标 定制Django Admin界面&#xff0c;提高数据管理效率。 任务概览 注册模型到Admin界面。定制Admin选项&#xff0c;如列表显示、搜索字段、过滤器等。 详细步骤 1. 注册模型到Admin界面 在Django Admin中注册模型&#xff0c…...

本地无法连接linux上的MariaDB数据库

问题&#xff1a;本地用DBeaver无法连接服务器上的MariaDB数据库 &#xff1f; 测试1&#xff1a;在cmd中ping 服务器IP&#xff0c;看是否能ping通&#xff0c;能ping通&#xff0c;没有问题 测试2&#xff1a;在cmd中telnet 服务器IP 端口&#xff0c;看是否能访问&#xf…...

使用 Netty 自定义解码器处理粘包和拆包问题详解

使用 Netty 自定义解码器处理粘包和拆包问题详解 在网络编程中&#xff0c;粘包和拆包问题是常见的挑战。粘包是指多个数据包在传输过程中粘在一起&#xff0c;而拆包是指一个数据包在传输过程中被拆分成多个部分。Netty 是一个高性能、事件驱动的网络应用框架&#xff0c;提供…...

SDK编译IO Domain电压选择

开源鸿蒙硬件方案领跑者 触觉智能 本文适用于在Purple Pi OH开发板进行分区镜像烧录。触觉智能的Purple Pi OH鸿蒙开源主板&#xff0c;是华为Laval官方社区主荐的一款鸿蒙开发主板。 该主板主要针对学生党&#xff0c;极客&#xff0c;工程师&#xff0c;极大降低了开源鸿蒙…...

如何在纯内网环境下,将EasyCVR视频汇聚网关通过4G与第三方公网云平台级联?

EasyCVR视频汇聚网关是TSINGSEE青犀软硬一体的一款产品&#xff0c;可提供多协议的接入、音视频采集、处理&#xff0c;能实现海量前端设备的轻量化接入/转码/分发、视频直播、云端录像、云存储、检索回看、智能告警、平台级联等&#xff0c;兼容多种操作系统&#xff0c;轻松扩…...

2024-06-14 AI资讯:CCF论坛探讨大模型挑战,启动安全赛

智源社区 共话大模型技术进展与挑战&#xff0c;CCF大模型论坛北京会议圆满落幕&#xff01; 2024 年 6 月 6 日中国计算机学会大模型论坛&#xff08;CCF FoLM&#xff09;主题会议在北京顺利举办。本次会议主题为“大模型技术进展与挑战”&#xff0c;各位专家围绕大模型技…...

玩转Matlab-Simscape(初级)- 10 - 基于COMSOLSimulink 凸轮机构的控制仿真

** 玩转Matlab-Simscape&#xff08;初级&#xff09;- 10 - 基于COMSOL&Simulink 凸轮机构的控制仿真 ** 目录 玩转Matlab-Simscape&#xff08;初级&#xff09;- 10 - 基于COMSOL&Simulink 凸轮机构的控制仿真 前言一、简介二、在Solidworks中创建3D模型&#xff…...

spark学习总结

系列文章目录 第1天总结&#xff1a;spark基础学习 1- Spark基本介绍&#xff08;了解&#xff09;2- Spark入门案例&#xff08;掌握&#xff09;3- 常见面试题&#xff08;掌握&#xff09; 文章目录 系列文章目录前言一、Spark基本介绍1、Spark是什么1.1 定义1.2 Spark与M…...

eNSP学习——帧中继基本配置

目录 主要命令 基本原理 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、静态与动态映射的配置 3、子接口配置和静态路由 主要命令 [R1]int s1/0/0 [R1-Serial1/0/0]link-protocol fr //配置链路层协议为FR Warning: The encapsulation protocol…...

XML Encoding = ‘GBK‘ after STRANS,中文乱码

最近帮同事处理了一个中信银行银企直连接口的一个问题&#xff0c;同事反馈&#xff0c;使用STRANS转换XML后&#xff0c;encoding始终是’utf-16’,就算指定了GBK也不行。尝试了很多办法始终不行&#xff0c;发到银行的数据中&#xff0c;中文始终是乱码。 Debug使用HTML视图…...

C 语言通用MySQL 功能增删查改功能.

前提条件&#xff1a;Ubuntu 22.04.4 LTS、MSQL 8数据库 并且已经安装MySQL 8 开发库。如果没有安装&#xff0c;可以查考&#xff1a;C 语言连接MySQL数据库 项目要求: 1、完成MySQL数据库增删改查通用功能封装 2、编辑makefile 文件实现项目动态更新和快速编译 项目结构…...

Java学习 - MySQL表 增减删查

建表 按照DDL练习&#xff0c;先创建student表和home表 插入【增】 向student表中同时插入三个新的字段【1,Alice,f,15353535353】【2,Bob,m,13646464646】【3,Jack,m,13745908686】 INSERT INTO student(id,name,gender,phone) VALUES(1,Alice,f,15353535353),(2,Bob,m,1364…...

力扣SQL50 有趣的电影 简单查询

Problem: 620. 有趣的电影 Code select * from cinema where id % 2 1 and description ! boring order by rating desc;...

01. Java并发编程简介

1. 前言 大家好&#xff0c;本节我们来一起学习 Java 并发编程的核心原理。 作为本专题的第一个小节&#xff0c;我们先来了解下什么是并发编程&#xff0c;以及学习并发编程的必要性&#xff0c;及学习过程应该注意的事项。 下面&#xff0c;我们先了解一下 Java 并发编程。…...

使用Node.js+Express开发简单接口

Node.js 和 Express 是非常流行的组合&#xff0c;用于开发快速、高效的 web 服务器和 API。下面是一个基础教程&#xff0c;介绍如何使用 Node.js 和 Express 开发一个简单的 API。 1. 安装 Node.js 和 npm 首先&#xff0c;确保您已经安装了 Node.js 和 npm&#xff08;Nod…...

【Python】使用OpenCV特征匹配检测图像中的【特定水印】

如果没有方向 往哪里走都是前方 做自己的光 不需要多亮 曾受过的伤 会长出翅膀 大雨冲刷过的天空会更加明亮 流过泪的眼睛也一样 做自己的光 悄悄的发亮 逆风的方向 更容易飞翔 世界怎样在于你凝视它的目光 那未曾谋面过的远方 或许就在身旁 &#x1f3b5…...

基于 Clang和LLVM 的 C++ 代码静态分析工具开发教程

基于 Clang和LLVM 的 C 代码静态分析工具开发教程 简介 静态代码分析是一种在不实际运行程序的情况下对源代码进行分析的技术。它可以帮助开发者在编译之前发现潜在的错误、安全漏洞、性能问题等。 在 C 开发中&#xff0c;有几种常用的静态代码分析工具&#xff0c;它们可以…...

Mathtype与word字号对照+Mathtype与word字号对照

字体大小对照表如下 初号44pt 小初36pt 一号26pt 小一24pt 二号22pt 小二18pt 三号16pt 小三15pt 四号14pt 小四12pt 五号10.5pt 小五9pt 六号7.5pt 小六6.5pt 七号5.5pt 八号5pt 1 保存12pt文件 首选选择第一个公式&#xff0c;将其大小改为12pt 然后依次选择 “预置”—…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...