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()函数写递归具体实现： 假设要…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
云原生玩法三问：构建自定义开发环境
云原生玩法三问：构建自定义开发环境 引言 临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。 运行设备的环境老，本地环境版本高，ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统，主要的模块包括管理员；首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
tauri项目，如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...