tooltip实现悬停内容染色
一: 通过highlight.js项目实现对json字符串的染色高亮
此项目是jsp文件,并且引用了element-ui/highlight.js的组件
二: 实现效果
三: 代码实现
关键点在于成功引入相关的js及css，并且在tooltip渲染时进行数据染色。再将染色后的数据放到v-html中进行页面渲染(关键方法: highlightedData)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/pages/main/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>主子服务查询</title><script src="${pageContext.request.contextPath}/js/vueEle/2.7/vue.js"></script><script src="${pageContext.request.contextPath}/js/vueEle/js/lib/vue-resource.js"></script><script src="${pageContext.request.contextPath}/js/vueEle/2.7/vueEle.js"></script><script src="${pageContext.request.contextPath}/js/highlight/es/highlight.min.js"></script><link rel="stylesheet" href="${pageContext.request.contextPath}/js/vueEle/2.7/vueEle.css"><link href="${pageContext.request.contextPath}/js/highlight/styles/atom-one-dark-reasonable.css" rel="stylesheet" type="text/css"><style><%-- 解决文本过长显示不全的问题 --%>.el-tooltip__popper {border-left: 20px solid #000000; /* 设置左侧边框为10px宽，颜色为黑色 */border-right: 10px solid #000000; /* 设置左侧边框为10px宽，颜色为黑色 */max-height: 400px;overflow-y: auto;}</style>
</head>
<body>
<div id="app" style="width: 100%"><template><el-container><el-header><el-form ref="form" :model="searchForm" label-width="150px"style="margin: 10px 10px 10px 10px;float: left":inline="true"><el-row><el-col><el-form-item label="工单号"><el-input v-model="searchForm.applicationNo"></el-input></el-form-item><el-form-item label="商编号"><el-input v-model="searchForm.merchantNo"></el-input></el-form-item><el-form-item><el-button type="primary" @click="search">查询</el-button></el-form-item></el-col></el-row></el-form></el-header><el-main><el-tablev-loading="loading":data="tableData"style="width: 100%;margin-bottom: 20px;"row-key="index"borderempty-text="无数据"property="sid" show-overflow-tooltip="true" label="" min-width="1"<%-- default-expand-all--%>:tree-props="{children: 'subFlowServiceRecords', hasChildren: 'hasChildren'}"><el-table-columnprop="index"label="序号"width="100"></el-table-column><el-table-columnprop="applicationNo"label="工单号"></el-table-column><el-table-columnprop="merchantNo"label="商编号"></el-table-column><el-table-columnprop="serviceName"label="步骤"></el-table-column><el-table-columnprop="status"label="状态"width="80"></el-table-column><el-table-column label="请求信息"><template slot-scope="scope" v-if="scope.row.mainServiceData"><el-tooltip ><div slot="content" style="border-left-width: 100px" v-html="highlightedData(scope.row.mainServiceData)"></div><el-button @click="copyData(scope.row.mainServiceData)">复制</el-button></el-tooltip></template></el-table-column><el-table-columnprop="startTime"label="开始时间"width="180"></el-table-column><el-table-columnprop="endTime"label="结束时间"width="180"></el-table-column></el-table><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":page-size="pageData.pageSize":page-sizes="[10, 20, 30, 40]"layout="total, sizes, prev, pager, next":total="pageData.total"></el-pagination></div></el-main></el-container></template></div>
<script>new Vue({el: '#app',data() {return {loading: false,tableData: [],pageData: {currentPage: 1,pageSize: 10,total: 0,},searchForm: {applicationNo: null,merchantNo: null}}},methods: {copyData(data) {const textarea = document.createElement('textarea');textarea.value = JSON.stringify(JSON.parse(data), null, 2);document.body.appendChild(textarea);textarea.select();document.execCommand('copy');document.body.removeChild(textarea);this.$message({message: '复制成功!',type: 'success'});},highlightedData(code) {const language = 'json'; // 指定要高亮的语言，例如 JSONlet code2 = JSON.stringify(JSON.parse(code), null, 2);return hljs.highlight(language, code2).value;},handleSizeChange(val) {this.pageData.pageSize = val;this.search()},handleCurrentChange(val) {this.pageData.currentPage = val;this.search()},search() {let applicationNo = this.searchForm.applicationNo;let merchantNo = this.searchForm.merchantNo;if ((applicationNo && applicationNo !== '')|| (merchantNo && merchantNo !== '')) {this.loading = true;this.$http.post('../flowService/queryRecordByApplicationNo',{applicationNo: applicationNo,merchantNo: merchantNo,currentPage: this.pageData.currentPage,pageSize: this.pageData.pageSize}).then(res => {if (res.body.status === 'success') {this.tableData = res.body.object.flowServiceRecordsthis.pageData.total = res.body.object.total;this.setSerialNumbers(this.tableData);} else {alert(res.body.errorMessage);}this.loading = false;})} else {this.loading = false;this.$message({message: '请至少输入一个参数!',type: 'warning'});}},setSerialNumbers(data, parentSerial = '') {let serial = 1;for (const item of data) {item.index = parentSerial + serial;serial++;if (item.subFlowServiceRecords && item.subFlowServiceRecords.length > 0) {this.setSerialNumbers(item.subFlowServiceRecords, item.index + '.');}}}}})
</script></body></html>
相关文章：
tooltip实现悬停内容染色
一: 通过highlight.js项目实现对json字符串的染色高亮 此项目是jsp文件,并且引用了element-ui/highlight.js的组件 二: 实现效果 三: 代码实现 关键点在于成功引入相关的js及css，并且在tooltip渲染时进行数据染色。再将染色后的数据放到v-html中进行页面渲染(关键方…...
“深入探讨Java JUC中的ReentrantLock锁：实现多线程同步与并发控制“
简介 1、从Java5开始，Java提供了一种功能更强大的线程同步机制——通过显式定义同步锁对象来实现同步，在这种机制下，同步锁由Lock对象充当。 2、Lock 提供了比synchronized方法和synchronized代码块更广泛的锁定操作，Lock允许实…...
Java|学习|多线程
1.多线程的一些概念 进程：是正在运行的程序 是系统进行资源分配和调用的独立单位 每一个进程都有它自己的内存空间和系统资源。 线程：是进程中的单个顺序控制流，是一条执行路径。 单线程：一个进程如果只有一条执行路径࿰…...
【Python机器学习】零基础掌握VotingClassifier集成学习
为什么一些数据预测模型在复杂场景下表现不如预期？ 在当今数据驱动的世界中，企业和研究者面临着如何从大量数据中提取有价值信息的挑战。假设一个电商公司想要通过用户行为数据预测产品销量，通常会使用单一的算法模型，如逻辑回归、随机森林或朴素贝叶斯。但问题来了，如果…...
深入了解JavaScript中的AJAX和HTTP请求
在现代Web开发中，AJAX（Asynchronous JavaScript and XML）和HTTP请求被广泛应用于实现动态交互式网页。本文将深入探讨AJAX的概念、工作原理以及使用方法。 什么是AJAX？ AJAX是一种利用JavaScript和HTTP请求与服务器进行异步通信的…...
第87步 时间序列建模实战：LSTM回归建模
基于WIN10的64位系统演示 一、写在前面 这一期，我们介绍大名鼎鼎的LSTM回归。 同样，这里使用这个数据： 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Renal…...
GB/T28181协议介绍
GB/T28181协议介绍 文章目录 GB/T28181协议介绍总体介绍GB/T28181基本结构GB/T28181关键协议流程设备注册设备目录查询实时视频播放流程 GB/T28181协议总结 说到GB/T28181协议，如果你是从事视频监控领域的工作，那对他一定不陌生，在公共安全、…...
光致发光荧光量子检测的作用
光致发光荧光量子检测是一种测试技术，可以用来测量荧光材料的荧光光谱、荧光量子效率和发光寿命等参数，具有高灵敏度、高分辨率和自动化程度高等优点。 光致发光荧光量子检测的应用范围广泛，可以应用于材料科学、生物科学、医学、光学器件、能…...
深度学习第四课
第九章 卷积神经网络解读 9.1 计算机视觉 目标分类 目标识别 64x64x312288 1000x1000x33000000 使用传统神经网络处理机器视觉面临的一个挑战是：数据的输入会非常大 一般的神经网络很难处理海量图像数据。解决这一问题的方法就是卷积神经网络 9.2 卷积运算 …...
Linux创建临时文件mkstemp()tmpfile()
有些程序需要创建一些临时文件，仅供其在运行期间使用，程序终止后即行删除。 很多编译器程序会在编译过程中创建临时文件。GNU C 语言函数库为此而提供了一系列库函数。（之所以有“一系列”的库函数，部分原因是由于这些函数分别继…...
js的节流和防抖详解
防抖和节流是JavaScript中的常见优化技巧，它们可以帮助我们控制代码在特定的时间间隔内执行的频率，从而优化性能。下面详细讲解它们的原理和使用方法。 防抖（Debounce）： 防抖的原理是当一个事件频繁触发时࿰…...
基于SpringBoot的水果销售网站
基于SpringBootVue的水果销售网站系统的设计与实现~ 开发语言：Java数据库：MySQL技术：SpringBootMyBatis工具：IDEA/Ecilpse、Navicat、Maven角色：管理员、商家、用户 系统展示 主页 水果详情 可直接购买，…...
vue2进阶学习知识汇总
目录 1.组件之处理边界情况 1.1 子组件访问根组件数据 1.2 子组件访问父组件数据 1.3 父组件访问子组件 1.4 依赖注入 1.5 程序化的事件侦听器 1.6 递归组件 1.7 内联模板 1.8 X-Template 1.9 强制更新 1.10 v-once 2.过渡效果与状态 2.1 过渡效果 2.1.1 单元素/…...
SQL SERVER连接oracle数据库几种方法
--1 方式 --查询oracle数据库中的表 SELECT * FROM OPENDATASOURCE( MSDAORA, Data SourceGE160;User IDDAIMIN;PasswordDAIMIN )..DAIMIN.JOBS 举一反三：在查询分析器中输入： SELECT * FROM OPENDATASOURCE( MSDAORA, Data SourceORCL;User…...
存储优化知识复习三详细版解析
存储优化 知识复习三 一、 选择题 1、 数据库领域的三位图灵奖得主是( )。 A、C.W.Bachman B、E.F.Codd C、Peter Naur D、James Gray 【参考答案】ABD2、 数据库DB、数据库系统DBS、数据库管理系统DBMS三者之间得关系是（ ）。 A、ＤB&#…...
HotReload for unity支持的代码修改
HotReload for unity支持的代码修改 HotReload的版本:1.2.4 Unity版本:2020,2021,2023 创作日期:2023.10.25 总结一下 支持在运行的时候修改异步，同步，重命名方法，修改方法参数，返回值，out，refÿ…...
写一个呼吸灯要几行代码？
module breathe( input clk, output reg led ); reg [26:0]cnt 1b0;always (posedge clk) begin cnt < cnt 1b1;if(cnt[15:6]>cnt[25:16])beginled < cnt[26];end else begin led < ~cnt[26];end endendmodule 笔者的clk是50M...
Banana Pi BPI-W3（Armsom W3）RK3588开当板之调试UART
前言 本文主要讲解如何关于RK3588开发板UART的使用和调试方法，包括UART作为普通串口和控制台两种不同使用场景 一. 功能特点 Rockchip UART (Universal Asynchronous Receiver/Transmitter) 基于16550A串口标准，完整模块支持以下功能： 支…...
LeetCode88——合并两个有序数组
LeetCode88——合并两个有序数组 1.题目描述： 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2，另有两个整数 m 和 n ，分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中，使合并后的数组同样按 非递减…...
C++ BinarySercahTree recursion version
for循环版本的：C BinarySercahTree for version-CSDN博客 Inorder()在c BinarySerschTree for verison写了。 还是按照那种嵌套的方式来写递归。 现在来写查找 FindR() bool FindR(){return _FindR(_root);}然后_FindR()函数写递归具体实现： 假设要…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
解锁数据库简洁之道：FastAPI与SQLModel实战指南
在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
宇树科技，改名了！
提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。 最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...