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

elementUI el-table实现鼠标悬浮某一行,在鼠标右侧展示提示信息

背景

el-table组件中,可以通过勾选某条数据来创建单据,但是有些数据没有权限使用,就需要禁用掉勾选的功能,然后当鼠标悬浮在这一行的时候,展示类似于toolTip的提示框。

除了当鼠标悬浮在某一行,展示类似于toolTip的提示框这一条el-table是没有提供配置项的,其他的都能够通过配置完成,那我们接下来看看如何实现鼠标悬浮某一行展示提示框的需求。

实现效果

在这里插入图片描述

具体实现

首先el-table有提供两个事件cell-mouse-enter和cell-mouse-leave,这两个事件分别在当单元格 hover 进入时以及当单元格 hover 退出时会触发,回调函数中能接收四个参数:row, column, cell, event。
我们可以通过cell-mouse-enter事件,在鼠标进入到当前行的时候,根据第一个参数row判断当前行是否需要进行提示。如果需要提示的话,我们可以获取第四个参数event,拿到当前触发hover事件的dom元素。然后动态生成一个提示框div定位到鼠标右侧,插入到body中。
然后通过监听cell-mouse-leave事件将这个元素从body中移除。

代码如下

// table组件
<el-table :data="tableData" style="width: 100%"@cell-mouse-enter="enterSelectionRows"@cell-mouse-leave="leaveSelectionRows"
>// ......
</el-table>
// 鼠标进入表格行的回调函数
enterSelectionRows: (row:any, column:any, cell:any, event:any) => {if (!row.hasAuth) {createTips(event, row, '请先在资产平台申请对应表查询权限')return}}
// 鼠标离开表格行的回调函数
leaveSelectionRows: (row:any) => {removeTips(row)
}// 创建toolTip
export function createTips(el:any, row:any, value:any) {const { id } = rowconst tooltipDom = document.createElement('div')tooltipDom.style.cssText = `display: inline-block;max-width: 400px;max-height: 400px;position: absolute;top: ${el.clientY + 5}px;left: ${el.clientX}px;padding:5px 10px;overflow: auto;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #595959;background: #fff;border-radius: 5px;z-index: 19999;box-shadow: 0 4px 12px 1px #ccc;`tooltipDom.innerHTML = valuetooltipDom.setAttribute('id', `tooltip-${id}`)// 将浮层插入到body中document.body.appendChild(tooltipDom)
}// 删除tooltip
export function removeTips(row:any) {const { id } = rowconst tooltipDomLeave = document.querySelectorAll(`#tooltip-${id}`)if (tooltipDomLeave.length) {tooltipDomLeave.forEach(dom => {document.body.removeChild(dom)})}

相关文章:

elementUI el-table实现鼠标悬浮某一行,在鼠标右侧展示提示信息

背景 el-table组件中&#xff0c;可以通过勾选某条数据来创建单据&#xff0c;但是有些数据没有权限使用&#xff0c;就需要禁用掉勾选的功能&#xff0c;然后当鼠标悬浮在这一行的时候&#xff0c;展示类似于toolTip的提示框。 除了当鼠标悬浮在某一行&#xff0c;展示类似于…...

Java 使用 poi 和 aspose 实现 word 模板数据写入并转换 pdf 增加水印

本项目所有源码和依赖资源都在文章顶部链接&#xff0c;有需要可以下载使用 1. 需求描述 从指定位置读取一个 word 模板获取业务数据并写入该 word 模板&#xff0c;生成新的 word 文档将新生成的 word 文档转换为 pdf 格式对 pdf 文档添加水印 2. 效果预览 word 模板 带水印的…...

Spring Boot进阶(93):体验式教程:手把手教你整合Spring Boot和Zipkin

&#x1f4e3;前言 分布式系统开发中&#xff0c;服务治理是一个比较重要的问题。为了更好地实现服务治理&#xff0c;需要解决服务跟踪问题&#xff0c;即如何对分布式系统中的服务进行监控和追踪。本文将介绍如何使用Zipkin进行服务跟踪&#xff0c;并结合Spring Boot进行整合…...

Lvs +keepalivede : 高可用集群

keepalived为Ivs应运而生的高可用服务。Ivs的调度器无法做高可用&#xff0c;于是keepalived这个软件。 实现的是调度器的高可用。 但是: keepalived不是专为Ivs集群服务的&#xff0c;也可以做其他代理服务器的高可用。 lvs的高可用集群&#xff1a;主调度器和备调度器&…...

得物 Redis 设计与实践yu

一、前言 自建 Redis 系统是得物 DBA 团队自研高性能分布式 KV 缓存系统&#xff0c;目前管理的 ECS 内存总容量超过数十TB&#xff0c;数百多个 Redis 缓存集群实例&#xff0c;数万多个 Redis 数据节点&#xff0c;其中内存规格超过 1T 的大容量集群多个。 自建 Redis 系统采…...

优咔科技创新连接方案助力高质量5G车联服务

上海优咔网络科技有限公司 CEO 闫楠 【摘要】本文就智能网联汽车对高质量5G车联服务的需求背景和行业趋势进行了分析&#xff0c;主要介绍采用5G双SIM卡的创新连接方案&#xff0c;重点讲述双SIM卡联网的端到端体系架构和技术方案&#xff0c;并就优咔科技全方位支撑行业领先车…...

(a /b)*c的值

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…...

Hive 常用DML操作

本专栏案例数据集链接: https://download.csdn.net/download/shangjg03/88478038 1.加载文件数据到表 1.1 语法 LOAD DATA [LOCAL] INPATH filepath [OVERWRITE] INTO TABLE</...

centos部署tomcat

Java Downloads | Oracle 上面是下载网址 Tomcat是由Apache开发的一个Servlet容器&#xff0c;实现了对Servlet和JSP的支持&#xff0c;并提供了作为Web服务器的一些特有功能&#xff0c;如Tomcat管理和控制平台&#xff0c;安全域管理和Tomcat阀 简单来说&#xff1a;Tomcat…...

【Spark】配置参数关系-重要

并行度数量 并行度指所有Executor可以同时执行的Task数&#xff0c; 每个Executor中的一个Core&#xff08;线程&#xff0c;虚拟核数&#xff09;同时只能执行一个Task&#xff0c; 所以 最大并行度 Executor数量 * 每个Executor的Core数&#xff1b; eg&#xff1a;资源配…...

[Qt之“MMM dd yyyyhh:mm:ss“]时间格式

这是时间格式字符串&#xff0c;用于表示日期和时间的显示格式。具体解释如下&#xff1a; “MMM”&#xff1a;表示月份的缩写&#xff0c;例如Jan、Feb、Mar等。“dd”&#xff1a;表示日期的两位数&#xff0c;例如01、02、03等。“yyyy”&#xff1a;表示年份的四位数&…...

SSM宾馆客房管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 宾馆客房管理系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统…...

永远在路上

今年的1024是自己过的第八个程序员节&#xff0c;虽然没有放假&#xff0c;但是公司给每一个程序员都发了一个水果拼盘的福利&#xff0c;礼轻情意重吧&#xff01;毕竟有许多公司都欠薪的情况下&#xff0c;我们公司不仅按时发薪资&#xff0c;而且还有固定福利和节日福利&…...

JS递归函数详解

递归函数是一种在函数内部调用自身的编程技巧。通过不断地将问题分解为更小的子问题&#xff0c;递归函数可以处理复杂的任务&#xff0c;并提供简洁和可读性高的代码实现。 基本原理&#xff1a; 1.递归函数由两个主要部分组成&#xff1a;基准条件&#xff08;base case&…...

JS问题:如何实现文本一键复制和长按复制功能?

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约2000字&#xff0c;整篇阅读大约需要4分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …...

react实现步进器

创建一个步进器组件&#xff0c;包含当前步骤&#xff08;currentStep&#xff09;的状态以及前进和后退的操作&#xff1a; import React, { useState } from react;function Stepper() {const [currentStep, setCurrentStep] useState(1);const handleNext () > {setCu…...

【jenkins】centos7在线安装jenkins

一、系统要求 最低推荐配置 256MB可用内存 1GB可用磁盘空间(作为一个Docker容器运行jenkins的话推荐10GB) 软件配置 Java 8—​无论是Java运行时环境&#xff08;JRE&#xff09;还是Java开发工具包&#xff08;JDK&#xff09;都可以 二、安装jenkins 准备一台安装有ce…...

Hive常用DDL操作

本专栏案例数据集链接: https://download.csdn.net/download/shangjg03/88478038 1. Database 1.1 查看数据库列表 show databases; 1.2 使用数据库 USE database_name;...

关于css中设置变量用于全局Css或者Js中使用

一、配置变量css文件 src/styles/variables.scss // 设置色值变量// 1、继承body中设置的样式内嵌style"--baseColor:#0075FF;" // 一般常用于Saas系统&#xff0c;如qiankun框架主应用决定子应用的样式 $primary: var(--baseColor, #0075FF); // 主色调&#xff0…...

Elasticsearch(十五)搜索---搜索匹配功能⑥--基于地理位置查询

一、前言 随着互联网的热门&#xff0c;越来越多的传统行业将全部或者部分业务转移到互联网上&#xff0c;其中不乏一些和地理位置强相关的行业。基于地理位置的搜索功能&#xff0c;大大提升了人们的生活和工作效率。例如&#xff0c;外出旅行时&#xff0c;只需要用手机打开…...

知网维普都要过,AI率85%用哪款工具最合适

越来越多高校开始同时要求知网和维普检测&#xff0c;这让选工具变得更复杂了——不是只要过一个平台&#xff0c;而是要同时达标。 AI率85%&#xff0c;知网和维普都要过20%以下&#xff0c;这种情况用哪款工具最合适&#xff1f; 知网和维普的算法差异 先说一个背景知识&a…...

AI Agent 时代工程范式革命全解(非常详细),Harness Engineering 从入门到精通,收藏这一篇就够了!

如果你最近在关注 AI 编程领域&#xff0c;一定刷到过这个词&#xff1a;Harness Engineering。 这个新概念正在以惊人的速度取代 Prompt Engineering 和 Context Engineering&#xff0c;成为 AI Agent 工程优化的正解。 今天这篇文章&#xff0c;我用自己的理解帮你理清楚。…...

-python-langchain框架(3-6-pdf文件分页加载 )

一、PDF分页加载的核心应用场景在实际开发中&#xff0c;分页加载并非多余操作&#xff0c;而是针对特定场景的最优解&#xff0c;尤其适合以下几种情况&#xff1a;大型PDF文件处理&#xff1a;单文件几十页、上百页&#xff0c;甚至更大&#xff0c;一次性加载全部内容会占用…...

python binascii

## 关于Base64&#xff0c;你可能需要知道这些 在编程的世界里&#xff0c;数据并不总是以我们熟悉的形式存在。有时候&#xff0c;一段文字、一张图片&#xff0c;或者任何其他类型的数据&#xff0c;需要被转换成另一种形式才能在不同的系统中安全传输或存储。Base64就是这样…...

一键生成专业工资条:工资条生成器功能详解

在当今数字化办公的时代&#xff0c;一款好的工具能够让工作效率得到质的提升。 工资条生成器就是这样一款专门为财务人员打造的专业工具&#xff0c;它集成了多项实用功能。 下面&#xff0c;就让我们来详细了解一下这款软件的各项功能特性。 首先要介绍的是软件的核心功能…...

从电桥到差分放大:三线制PT100测温电路的设计实践与精度考量

1. 三线制PT100测温电路的设计背景 温度测量在工业自动化、医疗设备、环境监测等领域都是基础且关键的技术需求。PT100作为一种广泛使用的铂电阻温度传感器&#xff0c;凭借其优异的线性度和稳定性&#xff0c;成为高精度测温的首选之一。但在实际应用中&#xff0c;如何准确测…...

从电机到USB:一文搞懂嵌入式里的感性负载、容性负载与阻抗匹配(附功率因数校正实例)

从电机到USB&#xff1a;一文搞懂嵌入式里的感性负载、容性负载与阻抗匹配&#xff08;附功率因数校正实例&#xff09; 在嵌入式系统设计中&#xff0c;工程师常常需要同时面对两种看似截然不同的挑战&#xff1a;大功率电机驱动的强电控制和高速数字通信的弱电信号处理。当电…...

2026届毕业生推荐的十大降AI率网站横评

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 达成降低AIGC率这一目标&#xff0c;也就是要削减文本里那种能够被辨认作是人工智能生成内容…...

VoxCPM-1.5-WEBUI作品集:高音质语音合成效果大赏

VoxCPM-1.5-WEBUI作品集&#xff1a;高音质语音合成效果大赏 1. 开篇&#xff1a;声音的艺术与技术 在数字内容创作领域&#xff0c;声音质量往往决定了作品的沉浸感和专业度。想象一下&#xff0c;当你听到一段清晰自然、富有情感的语音时&#xff0c;是否会不自觉地被吸引&…...

如何快速解决API开发痛点:5个技巧让Insomnia成为你的跨平台测试神器

如何快速解决API开发痛点&#xff1a;5个技巧让Insomnia成为你的跨平台测试神器 【免费下载链接】insomnia The open-source, cross-platform API client for GraphQL, REST, WebSockets, SSE and gRPC. With Cloud, Local and Git storage. 项目地址: https://gitcode.com/g…...