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

vue3二次封装tooltip实现el-table中的show-overflow-tooltip效果

news 来源：原创 2025/8/5 11:03:41

开发过程中遇到需要根据后端返回的数据长度来判断是否需要使用el-tooltip的情况，想到el-table里面就有这种交互效果，如果不论文字是否超出容器长度都展示tooltip的话，交互效果难免会差很多，所以二次封装了这个组件：

  1. 给目标容器绑定mouseenter事件
  2. 鼠标移入后克隆一下目标元素，并取消该元素的宽度样式
  3. 将克隆元素插入到页面中
  4. 获取克隆元素的文字后将元素从页面移除
  5. 用文字所占宽度跟容器宽度进行对比，判断展示tooltip

注意：二次封装的组件需要接收一个双向绑定的disabled变量，该示例比较简单，大家可以根据自己的需要对组件接收的字段进行补充

代码如下：

<template><el-tooltip:show-after="300":disabled="disabled":content="content"placement="top"><div class="ellipsis" @mouseenter="handleMouseSource">{{ content }}</div></el-tooltip>
</template><script setup>
const props = defineProps({disabled: {type: Boolean,default: false,},content: {type: String,default: "",},
});
// 注意disabled是双向绑定的，使用该组件时要用v-model:disabled = disabled
const emits = defineEmits(["update:disabled"]);// 判断当前tooltip是否显示
const handleMouseSource = (e) => {// 克隆原始div，但移除宽度样式（如果需要的话，也可以移除其他可能影响宽度的样式）const cloneDiv = e.target.cloneNode(true);// 移除克隆div的宽度样式，以确保它能根据内容扩展cloneDiv.style.width = "fit-Content"; // 设置克隆元素的宽度为内容宽度cloneDiv.style.visibility = "hidden"; // 隐藏克隆div，避免它影响页面布局cloneDiv.style.position = "absolute"; // 将其定位到页面外，避免滚动条等问题cloneDiv.style.left = "-9999px"; // 将其移动到屏幕外// 将克隆div添加到文档中（为了测量，但不在页面上显示）document.body.appendChild(cloneDiv);// 获取克隆div的宽度，这就是文字所占的宽度const textWidth = cloneDiv.offsetWidth;// 从文档中移除克隆divdocument.body.removeChild(cloneDiv);//  对比div容器的宽度和文本的宽度，如果文本宽度>=容器宽度，则展示tooltipemits("update:disabled", textWidth >= e.target.clientWidth);
};
</script><style lang="scss" scoped>
.ellipsis {width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
</style>

相关文章：

vue3二次封装tooltip实现el-table中的show-overflow-tooltip效果

开发过程中遇到需要根据后端返回的数据长度来判断是否需要使用el-tooltip的情况&#xff0c;想到el-table里面就有这种交互效果&#xff0c;如果不论文字是否超出容器长度都展示tooltip的话&#xff0c;交互效果难免会差很多&#xff0c;所以二次封装了这个组件&#xff1a; 给…...

编程日记 2025/8/5 11:03:41

STM32八股【1】-----启动流程和startup文件理解

启动流程 知识点 MCU 上电复位。MSP从向量表第0个地址读取一个32位&#xff08;2字节&#xff09;的值并保存&#xff0c;该值为栈顶地址。PC计数器从第1个地址读取一个两字节的值并保存&#xff0c;该值为程序入口&#xff0c;一般是Reset_Handler。想了解FLASH地址映射可以…...

编程日记 2025/7/25 9:28:58

Go语言中package的使用规则《二》

在 Go 语言中&#xff0c;包&#xff08;Package&#xff09; 是代码组织和复用的核心单元。以下是其定义、引用规则及使用习惯的详细说明&#xff1a; 一、包的定义规则 目录与包名 一个包对应一个目录&#xff08;文件夹&#xff09;&#xff0c;目录名通常与包名一致。 包名…...

编程日记 2025/8/5 11:03:22

初级：控制流程面试题精讲

一、引言 在Java开发中&#xff0c;控制流程语句是构建程序逻辑的基础。面试官通过相关问题考察候选人对if-else、switch、循环等语句的理解和运用能力&#xff0c;以及在复杂业务场景下合理选择控制流程语句的水平。本文将深入剖析常见的控制流程面试题&#xff0c;结合实际开…...

编程日记 2025/8/4 11:39:35

HTTP 失败重试（重发）方案

在 Qt 网络开发中&#xff0c;使用 QNetworkAccessManager 进行 HTTP 请求时&#xff0c;可能会遇到网络超时、服务器错误等情况。为了提高请求的可靠性&#xff0c;可以实现 HTTP 失败重试&#xff08;重发&#xff09; 机制。下面介绍几种常见的 失败重发方案&#xff1a; 单…...

编程日记 2025/7/30 8:16:04

TNNLS 2024 | 基于残差超密集网络的高光谱图像空间光谱融合方法

A Spatio-Spectral Fusion Method for Hyperspectral Images Using Residual Hyper-Dense Network IEEE Transactions on Neural Networks and Learning Systems 2024 这篇文章的研究背景是针对高光谱图像&#xff08;HS&#xff09;与全色图像&#xff08;PAN&#xff09;的…...

编程日记 2025/7/30 1:04:05

深入探究 JVM 堆的垃圾回收机制（二）— 回收

GC Roots 枚举需要遍历整个应用程序的上下文&#xff0c;而在进行可达性分析或者垃圾回收时&#xff0c;如果我们还是进行全堆扫描及收集&#xff0c;那么会非常耗时。JVM 将堆分为新生代及老生代&#xff0c;它们的回收频率及算法不一样。 1 回收算法 在进行可达性分析时&am…...

编程日记 2025/8/4 16:39:36

【ELK】节省存储 之 压缩存储方式调整

目录 集群版本&#xff1a; 7.17.6 解释几个概念&#xff1a; 段&#xff08;Segment&#xff09; 合并(Merge) 索引设置&#xff1a; 压缩方式(index.codec)&#xff1a; 测试设置前提条件 对比 在创建的时候指定压缩类型&#xff08;index.codec&#xff09; 对比 在…...

编程日记 2025/7/22 12:41:23

MATLAB 控制系统设计与仿真 - 26

状态空间控制系统概述 状态空间描述 现代控制理论是建立在状态空间基础上的控制系统分析和设计理论&#xff0c;它用状态变量来刻画系统的内部特征&#xff0c;用‘一节微分方程组’来描述系统的动态特性。系统的状态空间模型描述了系统输入/输出与内部状态之间的关系&#x…...

编程日记 2025/8/4 1:20:24

下载与快速上手 NVM：Node.js 版本管理工具

一、准备工作&#xff1a;卸载旧版 Node.js 重要提示&#xff1a;在安装 NVM 前&#xff0c;请先彻底删除已安装的 Node.js&#xff0c;避免路径冲突&#xff1a; 检查安装路径 bash where node常见路径&#xff1a; C:\Program Files\nodejs\C:\Users\用户名\AppData\Local\n…...

编程日记 2025/8/5 11:03:41

SQL Server Management Studio（SSMS）安装教程

目录 一、SSMS的下载 二、SSMS 的安装 三、连接服务器 四、卸载 SSMS 一、SSMS的下载 1.进入 SQL Server Management Studio 官方下载页面&#xff1a;SQL Server Management Studio点击进入下载页面 2.点击链接开始下载&#xff0c;浏览器右上角会显示下载进度&#xff1b;…...

编程日记 2025/8/4 6:04:06

运维知识：Linux下Vim编辑器使用详解

运维知识&#xff1a;Linux下Vim编辑器使用详解 引言 在Linux的世界里&#xff0c;Vim不仅仅是一个文本编辑器&#xff0c;更是程序员的「瑞士军刀」。从1991年Bram Moolenaar发布第一个版本至今&#xff0c;Vim以其高效的模态编辑、高度可定制性和跨平台兼容性&#xff0c;成…...

编程日记 2025/7/29 13:06:25

复习HCIA

一、网络基础概念 1. OSI七层模型与TCP/IP四层模型 OSI七层模型详解&#xff1a; 物理层&#xff08;Physical Layer&#xff09;&#xff1a; 功能&#xff1a;传输原始比特流&#xff08;0/1&#xff09;&#xff0c;定义电气、机械特性&#xff08;如电压、线缆类型&#…...

编程日记 2025/7/31 12:54:36

在QT中进行控件提升操作

目录 一、概述 二、功能需求 三、提升操作 1&#xff09;拖入标准控件 2&#xff09;自定义类 3&#xff09;提升控件 一、概述 QT中提供的标准控件能够满足我们大多数情况下的功能需求&#xff0c;但是在一些特殊应用场合&#xff0c;我们可能需要对控件的功能进行扩展&am…...

编程日记 2025/8/3 10:08:06

Linux下JDK1.8安装配置

目录 1.下载完上传到Linux系统中 2.解压JDK压缩包 3.配置JDK环境变量 4.设置环境变量生效 5.查看环境变量是否配置成功 官网下载地址:Java Downloads | Oracle 1.下载完上传到Linux系统中 2.解压JDK压缩包 tar -zxvf jdk-8u151-linux-x64.tar.gz -C /usr/local (解压…...

编程日记 2025/8/3 16:15:30

JVM 知识点梳理

JDK 、JRE、JVM JDK&#xff08; Java Development Kit &#xff09; Java开发工具包 JRE 开发命令工具&#xff08;运行java.exe、编译javac.exe、javaw.exe&#xff09; JRE&#xff08; Java Runtime Environment &#xff09;Java运行环境 JVM Java核心类库&#xff08;l…...

编程日记 2025/8/3 4:59:47

求职招聘网站源码，找工作招工系统，支持H5和各种小程序

招聘找活招工平台系统源码 招聘求职找工作软件 发布信息积分充值招聘系统，里面带纤细教程 功能介绍： 招工小程序主要针对工地招工工人找工作，工地可以发布招工信息，工人可以发布找活信息，招工信息可以置顶，置顶需要积分，积分可以通过签到、分享邀请好友、充值获取，后…...

编程日记 2025/8/5 11:01:06

拓展 Coco AI 功能 - 智能检索 Hexo 博客

在之前的文章中&#xff0c;我们成功让 Coco AI 检索 Hugo 博客&#xff0c;这对于博客作者来说是一大福音。然而&#xff0c;从 Hexo 迁移到 Hugo 的成本不容小觑&#xff0c;毕竟大多数开发者对 Node.js 更熟悉&#xff0c;而 Golang 相对陌生。那么&#xff0c;既然 Coco AI…...

编程日记 2025/8/4 12:09:26

深入解析 Java Stream API：从 List 到 Map 的优雅转换！！！

&#x1f680; 深入解析 Java Stream API&#xff1a;从 List 到 Map 的优雅转换 &#x1f527; 大家好&#xff01;&#x1f44b; 今天我们来聊聊 Java 8 中一个非常常见的操作&#xff1a;使用 Stream API 将 List 转换为 Map。&#x1f389; 具体来说&#xff0c;我们将深入…...

编程日记 2025/7/30 18:19:05

【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现全局状态管理

前言 在现代应用程序开发中&#xff0c;状态管理是构建复杂且可维护应用的关键。随着应用程序规模的增长&#xff0c;组件之间共享和同步状态变得越来越具有挑战性。如果处理不当&#xff0c;状态管理可能会导致代码混乱、难以调试&#xff0c;并最终影响应用程序的性能和可扩…...

编程日记 2025/8/2 18:42:40

金桔网桥路由版3

上一集我们讲到了二层云交换机&#xff0c;我把在云上搭建的桥接模式的VPN服务器称为二层云交换机。 那么现在我家到办公室的网络结构就变成这样的&#xff0c; 这样的好处就是我的电视盒子通过网线看电视&#xff0c;走的是OpenWrt路由器通过二层云交换机由办公室的OpenWrt路由…...

编程日记 2025/8/2 13:14:26

前沿分享｜处理LLM幻觉问题-CoN｜笔记链：增强检索增强语言模型的鲁棒性

检索增强语言模型&#xff08;RALMs&#xff09;在大型语言模型的能力方面取得了重大进步&#xff0c;特别是在减少事实幻觉方面&#xff0c;这得益于外部知识来源的利用。 然而&#xff0c;检索到的信息的可靠性并不总是有保证。 检索到无关数据可能导致误导性回答&#xff…...

编程日记 2025/8/1 7:56:51

OpenWrt开发第4篇：设置开发板的IP-基于Raspberry Pi 4B开发板

文/指尖动听知识库-谷谷 文章为付费内容，商业行为，禁止私自转载及抄袭，违者必究！！！ 文章专栏：Openwrt开发-基于Raspberry Pi 4B开发板 有时候开发过程中经常会使用其他路由器，很多时候固件烧上去之后板子IP基本都是192.168.1.1，这时就需要修改板子的IP，下面介绍一下板…...

编程日记 2025/8/3 11:09:34

浅谈跨平台框架的演变（H5混合开发-＞RN-＞Flutter）

引言 这里分为四个阶段&#xff1a; 第一阶段 &#xff1a; 原生开发 第二阶段 &#xff1a; H5混合开发 第三阶段&#xff1a; 跨平台RN 第四阶段&#xff1a; 跨平台Flutter 正文 第一阶段&#xff1a; 原生开发 开发成本比较大 &#xff1a; 需要Android 和ios 开发两…...

编程日记 2025/7/25 21:12:41

Android数据加密方案

Android数据加密方案 前言 在移动应用开发中，数据安全是一个永恒的话题。Android应用中往往需要存储和传输敏感数据，如用户密码、支付信息、个人隐私等。本文将深入介绍Android平台上的数据加密方案，帮助开发者构建安全可靠的数据保护机制。 基础知识 1. 加密算法分类 …...

编程日记 2025/8/4 20:51:49

深入理解traceroute命令及其原理

traceroute 是一个网络诊断工具&#xff08;Windows上叫tracert&#xff09;&#xff0c;用于显示数据包从本地主机到远程主机经过的路由&#xff08;跳数&#xff09;。它可以帮助您了解数据包在网络中的传输路径&#xff0c;以及每跳的延迟情况。这对于网络故障排除、分析网络…...

编程日记 2025/7/30 9:43:14

PostgreSQL_安装

目录 前置&#xff1a; 安装过程&#xff1a; 1 下载软件 2 创建安装文件夹和放置数据的文件夹 3 双击安装 4 连接服务 前置&#xff1a; PostgreSQL 15 windows 10 专业版 安装过程&#xff1a; 1 下载软件 PostgreSQL: Downloads 大小326MB 2 创建安装文件夹和放…...

编程日记 2025/7/31 2:20:03

leetcode684.冗余连接

依旧是并查集问题&#xff0c;这道题目正好给定顶点数目和边的数目相等&#xff0c;只要找到其中的一条边删除将图转化为树就行&#xff0c;而这个多余的边起始就是并查集的添加过程中二者是同一个根&#xff08;两个顶点早已经联通了&#xff09;&#xff0c;这时直接返回这条…...

编程日记 2025/8/5 11:01:05

Python学习第二十一天

爬虫 概念 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;也称为网络蜘蛛&#xff08;Web Spider&#xff09;&#xff0c;是一种自动化程序&#xff0c;用于从互联网上抓取数据。爬虫通过模拟浏览器行为&#xff0c;访问目标网站并提取所需的信息&#xff0c;然后…...

编程日记 2025/8/1 11:24:55

matlab近似计算联合密度分布

在 Matlab 中&#xff0c;当A和B是两个序列数据时&#xff0c;可以通过以下步骤来近似求出A大于B的概率分布&#xff1a;数据准备&#xff1a;确保序列A和B具有相同的长度。如果长度不同&#xff0c;需要进行相应的处理&#xff08;例如截取或插值&#xff09;。计算A大于B的逻…...

编程日记 2025/8/2 16:44:00

OpenCV图像处理基础2

接着上一篇OpenCV图像处理基础1继续说。 图像阈值处理 1、简单阈值处理 ret, thresholded_image = cv2.threshold(image, thresh, maxval, cv2.THRESH_BINARY)thresh 是阈值，maxval 是最大值。 2、自适应阈值处理 thresholded_image = cv2.adaptiveThreshold(image, maxv…...

编程日记 2025/8/3 12:22:40

Prometheus Exporter系列-Mysql_Exporter一键部署

新项目旧项目都需要给研发配置mysql监控&#xff0c;这里mysql监控对应aws 阿里云 腾讯云 华为云的云mysql产品或开源自建mysql。 exporter安装虽然简单&#xff0c;经常手动操作不免让人心烦&#xff0c;一键完成省去繁琐的常规操作。 配置信息对的情况下测试多次都可以正常安…...

编程日记 2025/8/5 11:01:06

A l密码学（Deepseek)

我&#xff1a;qwertyuiopasdfghjklzxcvbnm deepseek:深度思考中&#xff0e; Okay, lets see. The user input is "qwertyuiopasdfghjklzxcvbnm". At first glance, it looks like a jumbled sequence of letters with some spaces or maybe other characters in …...

编程日记 2025/8/5 11:01:07

​「Java-API帮助文档」

「Java-API帮助文档」&#xff0c;链接&#xff1a;https://pan.quark.cn/s/d7ced3b48f33 java.applet提供创建 applet 所必需的类和 applet 用来与其 applet 上下文通信的类。java.awt包含用于创建用户界面和绘制图形图像的所有类。java.awt.color提供用于颜色空间的类。java…...

编程日记 2025/8/3 1:37:06

卷积神经网络 - 梯度和反向传播算法

在卷积网络中&#xff0c;参数为卷积核中权重以及偏置。和全连接前馈网络类似&#xff0c;卷积网络也可以通过误差反向传播算法来进行参数学习。本文我们从数学角度&#xff0c;来学习卷积神经网络梯度的推导和其反向传播算法的原理。 一、梯度&#xff1a;损失函数 L 关于第 …...

编程日记 2025/8/1 1:31:42

ripro 主题激活 问题写入授权Token失败，可能无文件写入权限

ripro 主题激活 问题 写入授权Token失败&#xff0c;可能无文件写入权限 找到主题下面的functions.php文件&#xff0c;给其他写入权限。就好了。...

编程日记 2025/7/18 13:05:18

MySQL 中，查看执行频次、慢查询日志、SHOW PROFILE和 EXPLAIN性能分析和优化

在 MySQL 中，查看执行频次、慢查询日志、SHOW PROFILE 和 EXPLAIN 是性能分析和优化的核心工具。以下是它们的详细用法和高级语法： 一、查看 SQL 执行频次 通过 SHOW STATUS 命令可以查看 SQL 的执行频次，帮助定位高频查询。 1. 查看全局 SQL 执行频次 SHOW GLOBAL STATU…...

编程日记 2025/7/31 5:53:20

Springdoc 全部注解一文解释清楚

文章目录 **1. 核心注解****Tag-Class类上** **2. 方法级别注解****Operation-方法描述****ApiResponse 和 ApiResponses-方法的返回结果** **3. 参数相关注解****Parameter-方法参数****Parameters方法参数&#xff08;单个&#xff09;** **4. 实体模型相关注解****Schema-描…...

编程日记 2025/8/3 1:24:39

1.angular介绍

初級使用视频添加链接描述 angular工具 angular.module(‘名’, [依赖模块]) 模块 angular.bind(*) : 修改this指向 angualr.copy() // a angular.copy(a, b) —a完全覆盖了b,c就是a angular.extend(a, b) a里面集成了b属性 angular.isArray angular.isDate angular.isDefin…...

编程日记 2025/7/31 12:23:06

StarRocks vs Doris：深度剖析与选型分析

StarRocks vs Doris&#xff1a;深度剖析与选型分析 在大数据技术蓬勃发展的当下&#xff0c;企业对于高效的数据分析工具的需求日益增长。StarRocks 和 Doris 作为两款优秀的 MPP&#xff08;大规模并行处理&#xff09;数据库&#xff0c;在数据仓库和数据分析领域备受关注。…...

编程日记 2025/8/4 22:09:10

Ambari、Bigtop源码编译最新支持情况汇总

以下是目前的版本情况 支持了绝大部分的组件编译及安装 版本组件名称组件版本env 版本v1.0.5Ozone1.4.11.0.5Impala4.4.11.0.5Nightingale7.7.21.0.5Categraf0.4.11.0.5VictoriaMetrics1.109.11.0.5Cloudbeaver24.3.31.0.5Celeborn0.5.31.0.5v1.0.4Doris2.1.71.0.4v1.0.3Phoen…...

编程日记 2025/8/1 17:30:14

【sql靶场】第23、25，25a关过滤绕过保姆级教程

目录 【sql靶场】第23、25-28关过滤绕过保姆级教程 第二十三关 第二十五关 1.爆出数据库 2.爆出表名 3.爆出字段 4.爆出账号密码 【sql靶场】第23、25&#xff0c;25a关过滤绕过保姆级教程 第二十三关 从本关开始又是get传参&#xff0c;并且还有了对某些字符或字段的过…...

编程日记 2025/8/5 11:03:20

coding ability 展开第五幕（二分查找算法）超详细！！！！

. . 文章目录 前言二分查找搜索插入的位置思路 x的平方根思路 山脉数组的峰顶索引思路 寻找旋转排序数组中的最小值思路 总结 前言 本专栏上篇博客已经把滑动指针收尾啦 现在还是想到核心——一段连续的区间&#xff0c;有时候加上哈希表用起来很爽 今天我们来学习新的算法知识…...

编程日记 2025/8/4 7:01:49

存算分离是否真的有必要？从架构之争到 Doris 实战解析

引言&#xff1a;一场关于 “存与算” 的N年辩论 在数据库与大数据领域&#xff0c;“存算一体” 与 “存算分离” 的架构之争从未停歇。有人质疑&#xff1a;“存算分离真的有必要吗&#xff1f;本地盘性能难道不够&#xff1f;” 答案并非非黑即白 —— 技术选型的关键&…...

编程日记 2025/8/1 5:44:09

卸载conda，poetry常用命令，vscode使用poetry虚拟环境

~/miniconda3/bin/conda init bash ~/miniconda3/bin/conda init zsh conda info 查看当前环境的配置信息 conda install package-name conda install package-nameversion 安装依赖包 conda uninstall package-nameversion 卸载依赖包 conda update package-name 更新依赖包…...

编程日记 2025/7/27 23:36:50

【总结】Pytest vs Behave，BDD 测试框架哪家强？

引言 在测试驱动开发(TDD)和行为驱动开发(BDD)流行的今天&#xff0c;Pytest和 Behave 成为了 Python 生态中最常见的自动化测试框架。那么&#xff0c;究竟该选择哪一个&#xff1f;它们各自有哪些优缺点&#xff1f;本篇文章将为你全面解析&#xff01; 1. 什么是 Pytest&a…...

编程日记 2025/7/30 12:40:07

INT202 Complexity of Algroithms 算法的复杂度 Pt.2 Search Algorithm 搜索算法

文章目录 1.树的数据结构1.1 有序数据(Ordered Data)1.1.1 有序字典&#xff08;Ordered Dictonary&#xff09;1.1.1.1 排序表&#xff08;Sorted Tables&#xff09; 1.2 二分查找&#xff08;Binary Search&#xff09;1.2.1 二分查找的时间复杂度 1.3 二叉搜索树&#xff0…...

编程日记 2025/8/4 12:52:24

springmvc中使用interceptor拦截

HandlerInterceptor 是Spring MVC中用于在请求处理之前、之后以及完成之后执行逻辑的接口。它与Servlet的Filter类似&#xff0c;但更加灵活&#xff0c;因为它可以访问Spring的上下文和模型数据。HandlerInterceptor 常用于日志记录、权限验证、性能监控等场景。 ### **1. 创…...

编程日记 2025/7/26 15:38:57

C++编译汇编八股总结

汇编的四个阶段&#xff1f; 预编译&#xff08;预处理&#xff09;&#xff1a; 预编译是源代码在编译之前进行的一些处理&#xff0c;主要包括宏定义展开、条件编译指令处理和头文件展开等。 编译&#xff1a; 编译器根据源代码的语法和语义规则&#xff0c;将源代码进行词法…...

编程日记 2025/8/3 15:52:44

基于ArcGIS和ETOPO-2022 DEM数据分层绘制全球海陆分布

第〇部分 前言 一幅带有地理空间参考、且包含海陆分布的DEM图像在研究区的绘制中非常常见&#xff0c;本文将实现以下图像的绘制 关键步骤&#xff1a; &#xff08;1&#xff09;NOAA-NCEI官方下载最新的ETOPO-2022 DEM数据 &#xff08;2&#xff09;在ArcGIS&#xff08;…...

编程日记 2025/8/3 3:41:23