Vue 给表格单元格加省略号和hover提示

基于antd vue的a-popover封装一下即可

<template><a-popoverv-model="visible"trigger="none"><template #content>{{ text }}</template><divclass="ellipsis"@mouseenter="onMouseenter"@mouseleave="onMouseleave">{{ text }}</div></a-popover>
</template><script setup>
import { defineProps, ref } from 'vue';defineProps({text: {type: String,default: '',},
});const visible = ref(false);const checkOverflow = element => element.scrollWidth > element.clientWidth;let cancelEnter = true;
let cancelLeave = true;const onMouseenter = (e) => {cancelEnter = false;cancelLeave = true;setTimeout(() => {if (!cancelEnter) {visible.value = checkOverflow(e.target);}}, 100);
};const onMouseleave = () => {cancelLeave = false;cancelEnter = true;setTimeout(() => {if (!cancelLeave) {visible.value = false;}}, 120);
};</script><style lang="less">
.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/873415.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙Navigation路由能力汇总

基本使用步骤&#xff1a; 1、新增配置文件router_map&#xff1a; 2、在moudle.json5中添加刚才新增的router_map配置&#xff1a; 3、使用方法&#xff1a; 属性汇总&#xff1a; https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-compone…

Java线程池ThreadPoolExecutor原理、源码分析

目录 为什么要使用线程池&#xff1f; 线程池执行任务的具体流程是怎样的&#xff1f; 线程池的五种状态是如何流转的&#xff1f; 线程池中的线程是如何关闭的&#xff1f; 线程池为什么一定得是阻塞队列&#xff1f; 线程发生异常&#xff0c;会被移出线程池吗&#xff…

Python爬虫实战 | 爬取携程网景区评论|美食推荐|景点列表数据

本文采用Selenium库爬取携程网的景区评论。 携程接口接入 Selenium介绍 Selenium是一个Web的自动化测试工具&#xff0c;可以按指定的命令自动操作&#xff0c;如让浏览器加载页面、获取数据、页面截屏等。Selenium本身不自带浏览器&#xff0c;需要与第三方浏览器结合才能使…

sklearn基础教程:从入门到精通

文章目录 sklearn基础教程&#xff1a;从入门到精通一、sklearn简介二、安装与配置三、数据预处理数据导入数据清洗特征选择数据标准化与归一化 四、常用模型介绍与应用线性回归逻辑回归决策树支持向量机K近邻算法随机森林集成学习 五、模型评估与调优交叉验证网格搜索模型评估…

基于springboot和mybatis的RealWorld后端项目实战二之实现tag接口

修改pom.xml 新增tag数据表 SET FOREIGN_KEY_CHECKS0;-- ---------------------------- -- Table structure for tags -- ---------------------------- DROP TABLE IF EXISTS tags; CREATE TABLE tags (id bigint(20) NOT NULL AUTO_INCREMENT,name varchar(255) NOT NULL,PR…

一文认识21世纪商贸物流新格局

在21世纪的全球化浪潮中&#xff0c;商贸物流作为连接生产与消费的重要纽带&#xff0c;其地位日益凸显。随着信息技术的飞速发展&#xff0c;特别是大数据、云计算、物联网等技术的广泛应用&#xff0c;现代物流已远远超越了传统意义上的货物运输与仓储&#xff0c;向着智能化…

前端Canvas入门——用canvas写五子棋?

前言 五子棋的实现其实不难&#xff0c;因为本身就是一个很小的游戏。 至于画线什么的&#xff0c;其实很简单&#xff0c;都是lineTo()&#xff0c;moveTo()就行了。 难的在于——怎么让棋子落入到指定的格子上&#xff0c;怎么判断连子胜利。 当然啦&#xff0c;这部分是…

基于STC8H4K64TL单片机的触摸功能调试

基于STC8H4K64TL单片机的触摸功能调试 STC8H4K64TL单片机介绍STC8H4K64TL单片机管脚图(48个引脚)STC8H4K64TL单片机串口仿真与串口通信STC8H4K64TL单片机管脚图(32个引脚)STC8H4K64TL单片机管脚图(20个引脚)STC8H系列单片机管脚说明STC8H系列单片机I/O口STC8H系列单片机I…

关于Codigger之软件项目体检Software Project HealthCheck

为你的软件项目提供快速、可靠的体检 项目体检是Codigger推出的智能代码质量检查工具&#xff0c;可以系统地帮助您交付干净的代码。作为我们Codigger解决方案的重要元素 &#xff0c;代码体检集成到您现有的工作流程中并检测代码中的问题&#xff0c;以帮助您对项目执行持续的…

django中日志模块logging的配置和使用

一、文件的配置 settings.py文件中添加LOGGING块的配置&#xff0c;配置如下 # 日志记录 LOGGING {"version": 1,"disable_existing_loggers": False, # 用于确定在应用新的日志配置时是否禁用之前配置的日志器# 格式器"formatters": {"v…

云监控(华为) | 实训学习day4(10)

SpringBoot增删改的细节研究 一、Spring boot增的安全性 1.开启数据库的事务 SpringBoot中Service层有事务&#xff08;保证操作成功&#xff09; 两个用户操作&#xff0c;同时增加同一条数据&#xff08;用户名&#xff0c;密码一致&#xff09; 验证内容&#xff0c;开启…

MySQL:基础操作(增删查改)

目录 一、库的操作 创建数据库 查看数据库 显示创建语句 修改数据库 删除数据库 备份和恢复 二、表的操作 创建表 查看表结构 修改表 删除表 三、表的增删查改 新增数据 插入否则更新 插入查询的结果 查找数据 为查询结果指定别名 结果去重 where 条件 结…

【Jmeter】记录一次Jmeter实战测试

Jmeter实战 1、需求2、实现2.1、新建线程组2.2、导入参数2.3、新建HTTP请求2.4、添加监听器2.5、结果 1、需求 查询某个接口在高并发场景下的响应时间(loadtime)&#xff0c;需求需要响应在50ms以内&#xff0c;接下来用Jmeter测试一下 Jmeter安装见文章《Jemeter安装教程&am…

极狐GitLab Git LFS(大文件存储)如何管理?

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

解决xshell连接不上ubuntu首次安装的虚拟机问题

首次安装完虚拟机&#xff0c;主机和虚拟机之间互ping都没问题&#xff0c;但是xshell登不上去&#xff0c;基本上原因就是虚拟机没有安装ssh服务。 1、关闭防火墙 sudo ufw disable 2、开发22端口 sudo ufw allow 22 3、最后安装ssh sudo apt-get install openssh-serve…

日文医学文献pdf怎么翻译

翻译日文医学文献的PDF可以通过以下几个步骤进行&#xff1a; 1、提取文本&#xff1a; 如果PDF文档是扫描版或者图片格式&#xff0c;可以使用OCR&#xff08;光学字符识别&#xff09;软件提取文本。常用的OCR工具有Adobe Acrobat、ABBYY FineReader等。 如果PDF文档已经是…

多层全连接神经网络(四)---简单的前向网络

神经网络神经元概念部分有需要会单独再讲 激活函数 1. Sigmoid Sigmoid 非线性激活函数的数学表达式是 σ(z) &#xff0c;其图形如图 3.14所示。目前我们知道 Sigmoid 激活函数是将一个实数输入转化到 0~1 之间的输出&#xff0c;具体来说也就是将越大的负数转化到越靠近 0…

C/C++蓝屏整人代码

文章目录 &#x1f4d2;程序效果 &#x1f4d2;具体步骤 1.隐藏任务栏 2.调整cmd窗口大小 3.调整cmd窗口屏幕颜色 4.完整代码 &#x1f4d2;代码详解 &#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;关注博主&a…

笔记 7 :linux 011 注释,函 bread () , get_hash_table () , find_buffer ()

&#xff08;57&#xff09;接着介绍另一个读盘块的函数 bread&#xff08;&#xff09;&#xff1a; &#xff08;58&#xff09;因为 函数 get_blk&#xff08;&#xff09;大量调用了其它函数&#xff0c;一版面列举不完&#xff0c;故对其调用的函数先行注释&#xff1a;ge…

【Linux】服务器安装SSH

【Linux】服务器安装SSH 【创作不易&#xff0c;求点赞关注收藏】&#x1f600; 在Ubuntu服务器上安装并配置SSH非常简单。你可以按照以下步骤进行操作&#xff1a; 1、更新软件包列表 sudo apt-get update2、安装OpenSSH服务器: sudo apt-get install openssh-server3、启…