Vue3中使用el-table遇到的问题

我在使用element-plus中el-table组件的时候,对于某一<el-table-column>标签内的内容设置show-overflow-tooltip属性,但这里溢出展示的tooltip的默认样式是无法像el-tooltip标签那样,直接可以修改的。默认的样式是这样:

因此,我尝试这样:

<el-table-column property="name" :label="$t('Name')" 
min-width='40%' show-overflow-tooltip><template #default="scope"><el-tooltip :content="scope.row.file_name" placement="bottom" offset="5" effect="light" :disabled="isShowFileName"><span class="name-line">{{ scope.row.file_name }}</span></el-tooltip></template>
</el-table-column>

但这样会导致同时展示两个tooltip,并且下面包裹在span标签外层的el-tooltip是会一直显示的,这里还需要写一个方法来判断当前是否溢出,这样逻辑就复杂了很多,至于如何判断,下面我会贴代码。这里我讲一下我对show-overflow-tooltip属性设置后样式的处理方法,使用官方文档中的:

注意这里这个属性是el-table的,不要写在<el-table-column>标签上,代码如下:

<el-table-column property="name" :label="$t('Name')" 
min-width='40%' show-overflow-tooltip
:tooltip-options="{placement: 'bottom', effect: 'light', offset: -10}"><template #default="scope"><el-tooltip :content="scope.row.file_name" placement="bottom" offset="5" effect="light" :disabled="isShowFileName"><span class="name-line">{{ scope.row.file_name }}</span></el-tooltip></template>
</el-table-column>

实现效果如下:

上面提到如何判断当前文本是否溢出呢,我在需要判断的元素身上绑定了@mouseenter方法,然后编写代码如下(TS代码):

<el-tooltip :content="file_name" placement="bottom" offset="10" effect="light" :disabled="isShowName"><span class="pre-info-title" @mouseenter="visibilityNameChange($event)">{{ file_name }}</span>
</el-tooltip>function visibilityNameChange(event: any) {const ev = event.targetconst evWeight = ev.scrollWidthconst contentWeight = ev.clientWidthif (evWeight > contentWeight) {// 实际宽度 > 可视宽度  文字溢出isShowName.value = false} else {// 否则为不溢出isShowName.value = true}
}

 即可判断是否溢出~

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

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

相关文章

1.树莓派4b+ubuntu18.04(ros版本melodic)+arduino mega自制两轮差速小车,实现建图导航功能

第一篇先介绍材料准备、环境配置和ros的安装 1.材料准备 1.树莓派4b&#xff0c;8g版本 2.arduino mega 3.MG310编码电机*2 4.雷达ydlidar X3 5.Tb6612电机驱动板 6.12v电池 7.ubuntu18.04ros melodic版本 2.环境配置 树莓派安装ubuntu18.04版本 ubuntu18.04版本的镜像可以…

安装vue时候发现npm淘宝镜像不能使用,报出:npm.taobao.org和registry.npm.taobao.or

2024.3.12 安装vue时候发现npm淘宝镜像不能使用&#xff0c;需要重新更换源&#xff0c;简单来说就是更换镜像 使用 npm config get registry 查看当前的镜像&#xff1b; npm config get registry 使用npm config set registry http://mirrors.cloud.tencent.com/npm/ &…

食品预包装:舌尖安全的第一道防线

在当今快节奏的生活中&#xff0c;食品预包装不仅是保护食品的屏障&#xff0c;更是传递品质与美味的使者。 预包装首先展现出的是其保鲜的魔力。它宛如一层坚固的护盾&#xff0c;有效地阻隔外界因素对食品的侵蚀&#xff0c;让食品的新鲜度和口感得以长久保存。无论是酥脆的点…

对接Shopify电商平台的流程

对接Shopify平台的流程通常包括以下关键步骤&#xff0c;在整个对接过程中&#xff0c;需要密切关注Shopify的API使用限制、认证机制、数据隐私政策等&#xff0c;确保应用的安全性和合规性。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合…

广东信息工程职业学院2024年成人高等继续教育招生简章

一、学校简介 广东信息工程职业学院位于广东省肇庆市&#xff0c;是一所具有一定办学规模&#xff0c;办学定位和培养目标明确&#xff0c;办学特色和追求鲜明&#xff0c;可持续发展的全日制普通高等学校&#xff0c;学院坚持以人为本&#xff0c;以德育人&#xff0c;以良好…

使用Jetpack Compose创建自定义可滚动网格

使用Jetpack Compose创建自定义可滚动网格 Jetpack Compose是Android开发中的现代UI工具包&#xff0c;极大地简化了界面构建过程。本文将介绍如何使用Jetpack Compose创建一个可滚动的网格布局&#xff0c;帮助开发者更高效地管理大量数据和动态内容。我们将通过示例代码详细…

▶《强化学习的数学原理》(2024春)_西湖大学赵世钰 Ch5 蒙特卡洛方法【model-based ——> model-free】

PPT 截取必要信息。 课程网站做习题。总体 MOOC 过一遍 1、视频 学堂在线 习题 2、 过 电子书 是否遗漏 【下载&#xff1a;本章 PDF GitHub 页面链接 】 【第二轮 才整理的&#xff0c;忘光了。。。又看了一遍视频】 3、 过 MOOC 习题 看 PDF 迷迷糊糊&#xff0c; 恍恍惚惚。…

【Python/Pytorch 】-- SVM算法

文章目录 文章目录 00 写在前面01 SVM算法简介02 SVM算法的基本原理线性SVM非线性SVM 03 基于Python 版本的SVM算法04 优化目标表达式理解&#xff1a;05 约束条件表达式理解 00 写在前面 SVM算法可以结合鲸鱼算法、飞蛾扑火算法、粒子群算法、灰狼算法、蝙蝠算法等等各种优化…

OpenAPI

大家好我是苏麟 , 今天带来一个前端生成接口的工具 . 官网 : GitHub - ferdikoomen/openapi-typescript-codegen: NodeJS library that generates Typescript or Javascript clients based on the OpenAPI specification 安装命令 npm install openapi-typescript-codegen --sa…

数据分析:微生物组差异丰度方法汇总

欢迎大家关注全网生信学习者系列&#xff1a; WX公zhong号&#xff1a;生信学习者Xiao hong书&#xff1a;生信学习者知hu&#xff1a;生信学习者CDSN&#xff1a;生信学习者2 介绍 微生物数据具有一下的特点&#xff0c;这使得在做差异分析的时候需要考虑到更多的问题&…

在LangChain中,LLM(大型语言模型)和LLM Chain的区别是什么?

简单来说&#xff0c;LLM是一个大型语言模型&#xff0c;而LLM Chain是由多个LLM或其他组件组成的链式结构&#xff0c;用于在LangChain中构建复杂的自然语言处理流程。 Direct LLM Interface: 直接大型语言模型&#xff08;LLM&#xff09;接口&#xff1a; llm Open…

Okhttp响应Json数据

简介 OkHttp是一个高效、现代的HTTP客户端库&#xff0c;专为Android和Java应用程序设计&#xff0c;用于发送网络请求和处理响应。它支持HTTP/2和SPDY协议&#xff0c;允许连接复用&#xff0c;减少延迟&#xff0c;提高网络效率。OkHttp还处理了常见的网络问题&#xff0c;如…

电容的命名规则

给如下参数给采购&#xff0c;就可以获取 还有一些参数需要重视 容值随着环境温度而保持的程度 常规应用时是可以不用看材质&#xff0c;但是如果使用在新能源汽车和极端环境下的电子产品&#xff0c;就需要关注材质&#xff0c;曾有供应商把可用级电容供应车企&#xff0c;导致…

昇思25天学习打卡营第4天|数据变换Transforms

学习内容复盘 1.1 数据变换 什么是数据变换、为何要数据变换 通常情况下&#xff0c;直接加载的原始数据并不能直接送入神经网络进行训练&#xff0c;此时我们需要对其进行数据预处理。MindSpore提供不同种类的数据变换&#xff08;Transforms&#xff09;&#xff0c;配合数…

学习VXLAN -- 报文结构、原理和配置

目录 VXLAN背景什么是VXLANVXLAN的优势VXLAN报文结构一些特定名词BDVBDIFVAPVSIVSI-InterfaceAC VXLAN的实现原理图VXLAN MAC地址表项MAC地址动态学习 VXLAN隧道VXLAN隧道工作模式L2 GatewayIP Gateway VXLAN隧道的建立与关联VXLAN隧道建立的方式VXLAN对到与VXLAN关联的方式 配…

低成本STC32G8K64驱动控制BLDC开源入门学习方案

低成本STC32G8K64驱动控制BLDC开源入门学习方案 ✨采用STC32G8K64单片机&#xff0c;参考梁工的STC32G12K128-LQFP48驱动方案制作&#xff0c;梁工BLDC相关的资料&#xff1a;https://www.stcaimcu.com/forum.php?modviewthread&tid7472&extrapage%3D1&#xff0c;在此…

python tarfile解压失败怎么解决

问题原因 在使用tarfile模块解压一份Linux服务器上的打包文件时&#xff0c;出现了错误提示&#xff1a;IOError&#xff1a;[Errno 22] invalid mode (wb) or filename. 经过检查&#xff0c;发现是因为打包文件中有文件名存在“&#xff1a;”符号&#xff0c;而window下的…

python rename报错怎么解决

刚接触python&#xff0c;写了一段简单的代码&#xff0c;功能就是重命名一个文件&#xff0c;代码如下&#xff1a; list_1os.listdir(".") for files in list_1:fopen(files)if f.name"01.txt":os.rename(01.txt,001.txt)elif f.name"05.txt":…

【Python机器学习】k均值聚类——k均值的失败案例

k均值可能不总能找到“正确”的簇个数&#xff0c;每个簇仅由其中心定义&#xff0c;这意味着每个簇都是凸形。因此&#xff0c;k均值只能找到相对简单的形状。k均值还假设所有簇在某种程度上具有相同的“直径”&#xff0c;它总是将簇之间的边界刚好画在簇中心的之间位置。有时…

找不到msvcr120.dll怎么办,msvcr120.dll丢失的多种解决方法

msvcr120.dll是微软Visual C 2013的可再发行组件包中的一个文件&#xff0c;它是许多程序运行所必需的。这个文件包含了Visual C库&#xff0c;这些库为使用C编写的软件提供支持。如果你的电脑中缺少msvcr120.dll文件&#xff0c;那么依赖这个文件运行的应用程序可能无法启动或…