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()函数写递归具体实现： 假设要…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
django filter 统计数量 按属性去重
在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
深度学习习题2
1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...