【elementplus】body设置zoom后，el-table开启show-overflow-tooltip后，表格的tooltip显示会错位的解决方案

最新推荐文章于 2025-03-03 19:05:57 发布
最新推荐文章于 2025-03-03 19:05:57 发布
阅读量3k 收藏 3
点赞数
分类专栏： elementuiPlus 文章标签： 前端 elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bbt953/article/details/131518602
版权
文章讲述了在使用Zoom时遇到的一个问题，即在el-table组件中，tooltip显示的位置不正确，它会出现在错误的行上。为了解决这个问题，作者提出了一个解决方案，即通过应用CSS的transform属性并设置scale(1)和transform-origin:00，能够修复表格组件的位置，确保tooltip始终显示在正确行的位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于我的项目是无法避免使用zoom，所以只记录zoom后的解决方案

示例：明明划过的是第一行，tooltip却显示到了第四行的位置；
在这里插入图片描述
正确显示：划过第一行，tooltip显示在第一行的位置
在这里插入图片描述
代码：使用transform属性来修复el-table组件的位置

.elp-table {
    transform: scale(1);
    transform-origin: 0 0;
}
【vue+elementUI】表格列展示顺序错乱
栀妹儿的炼丹炉
10-16 4266
element-ui 中的 el-table表格 el-table-column列展示排序不是代码顺序，刷新顺序改变（排序错乱） 解决 利用 key=“1” 代码 <el-table show-overflow-tooltip="true" :data="tableData" tooltip-effect="dark" v-loading="tableLoading" :header-cell-style="{background:'#EFF3F8',colo
el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示
helenjuan的博客
04-15 4142
这里写自定义目录标题el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示 el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示 在table中设置了show-overflow-tooltip后,当某一列字符内容超长时,鼠标移入会出现闪烁不显示提示, 可以使用el-popover代替tooltip, 并且可以重写el-popover的样式, 保持跟tooltip提示框样式一致 <el-ta
针对zoom缩放导致echarts图表tooltip偏移问题
Meiwenzhi520的博客
11-14 1050
在mounted中监听，单独处理canvas。
vue3+element-plus使用tooltips时弹出的气泡位置错误的问题
hellolipop
06-23 3587
element-plus使用tooltips时气泡位置错误，箭头和主题部分分离
Vue3 Transition组件深度解析：结合Element Plus实践指南
最新发布
qq_39842184的博客
03-03 845
default;default;通过深入理解Vue3 Transition组件的工作原理，并结合Element Plus等成熟组件库的实践经验，开发者可以构建出既美观又高性能的过渡效果。建议通过以下方式深化学习：研究Element Plus源码的transition实现使用Chrome DevTools的Animations面板分析动画实践复杂的Transition-group应用场景扩展阅读Vue3 Transition官方文档Element Plus Transition组件源码。
elementUi el-table中使用show-overflow-tooltip时的异常错误
jitenshadesu的博客
11-12 881
show-overflow-tooltip这个属性触发后，肯定会生成一个元素在页面上面。show-overflow-tooltip这个属性的触发方式，默认是使用hover的，简单的来说是一个鼠标事件。这种写法不安全，偶尔会不成功，不需要设置prop属性，只需要控制columnIndex的范围即可控制对应列。这种写法安全推荐，必须设置需要控制列el-table-column的prop属性。两种解决方案，阻止这个事件发生、让这个事件发生了但是看不出来。但是我没有找到那个元素，岂可休！二、事件发生但是看不出来。
el-table表格设置show-overflow-tooltip后导致单元格居中失效的问题！
weixin_57182748的博客
03-03 1556
可以看到并没有居中。个人理解是每列的宽度是根据表头进行计算的，设置居中后会直接根据单元格内容进行居中，但是如果加了show-overflow-tooltip属性后，就会强制一行显示，会造成这种问题，不知道理解对不对。解决办法也挺简单，重新给它写样式，但是一定要加!important。否则是无效的，如果表格嵌套或者是复用的，建议不要使用，以免造成样式污染错乱了。以前使用element的el-table组件时，如果要内容和表头都居中，一般是直接设置表头和单元格属性。就可以实现相关功能。
vue2 由于大屏设置了zoom导致el-tooltip错位问题
qq_41615201的博客
01-29 2212
vue2 zoom 适配 el-tooltip
el-table show-overflow-tooltip触发，切换页面，导致提示信息不消失悬停左上角
weixin_43305450的博客
07-26 1925
el-table show-overflow-tooltip触发，切换页面，导致提示信息不消失悬停左上角
el-table表格使用插槽show-overflow-tooltip属性失效
weixin_46054723的博客
04-20 2773
需求是直接在表格上修改内容，所以在表格中使用了插槽，将输入框插入表格中。当内容过长时，用户想鼠标移入出现气泡完整查看内容。
element show-overflow-tooltip当内容过长被隐藏时显示 tooltip时候内容不换行，下拉菜单select内容太长不出现滚动条
weixin_40011543的博客
04-21 4953
// 解决列表数据过长poper一行显示太长不美观问题 .el-tooltip__popper{ max-width: 200px; } // 解决下拉菜单选项太长，自动撑开不出现滚动条问题 .el-select-dropdown{ max-width: 243px; } .el-select-dropdown__item{ display: inline-block; } .el-select-...
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
10-17
本文讲解了如何在使用Vue 2.0和Element UI 2.0框架中，给表格的表头添加扩展功能，即在表头内容过长时，通过鼠标悬停显示el-tooltip文字提示，来实现更加友好的用户交互。 在开始介绍代码实现之前，让我们先了解两...
Vue+Element Ui el-table列表中的tooltip内容过长超出屏幕换行显示
蓝胖子的博客
06-17 1426
Vue+Element Ui el-table列表中的tooltip内容过长超出屏幕换行显示
Vue进阶（九十三）：show-overflow-tooltip实现表格列内容过长显示提示_vue tooltip超出宽度提示
2401_84617356的博客
05-16 1331
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件。
el-table fixed 表格列错位 以及 替换u-table时 表格列 show-overflow-tooltip 层级问题
weixin_45410246的博客
07-20 1089
1.表格列fixed错位 . 2.tip显示在后面 解决方案 doLayout方法 tip问题 mounted () { this.$nextTick(() => { this.$refs.table.doLayout() }) }, 错位 就在调完做完操作后加doLayout
【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案
bbt953的博客
04-18 7885
【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案
Element el-table 表格内容 样式错乱的问题
小菜儿前端的博客
10-14 772
【代码】Element el-table 表格内容 样式错乱的问题。
解决el-table表格打印错位，el-table打印时表格行错位问题，el-table数据过多打印行错位问题。
海贼王某人的博客
09-19 1906
解决el-table表格打印错位，el-table打印时表格行错位问题，el-table数据过多打印行错位问题。,记录el-table打印时的一个小BUG，行错位的问题，先看看bug图，再看看解决后的效果图，最后奉上代码。
Element Table show-overflow-tooltip属性显示在下方的解决方案
NuoYan3327的博客
04-19 4319
首先来看默认的show-overflow-tooltip悬浮显示的样式： 在使用Table时可以设置超出内容通过show-overflow-tooltip属性达到悬浮显示的状态，但是这个悬浮框默认是显示在上方的。有时候我们会想让他出现在下方或者其他方向，来达到下图的效果： 解决方案如下： <el-table-column placement="bottom" align="center" prop="model" label="型号" min-width="90">
el-table-column的show-overflow-tooltip悬浮异位
10-16
`el-table-column` 的 `show-overflow-tooltip` 属性用于当列内容溢出时显示一个提示 tooltip。这个属性允许你在单元格的内容过多无法全部展示时，提供额外的信息给用户，通常会在鼠标悬停在超出部分时显示。当设置为 `true` 时，如果单元格的文字或图标超过其容器的宽度，一个带有省略标记的tooltip就会出现，鼠标移开后tooltip会自动消失。 为了实现这种悬浮异位效果，你需要确保 `title` 或者自定义的 tooltip 内容已经被设置，并且列的样式已经设置了适当的宽度限制。当内容超过这个宽度时，hover 事件会被触发，显示 tooltip。例如： ```html <el-table-column label="标题" prop="name" show-overflow-tooltip> </el-table-column> ``` 如果你需要更精细的控制，可以利用 CSS 来调整 tooltip 的位置和样式，例如： ```css .el-tooltip { position: absolute; left: 50%; transform: translateX(-50%); /* 添加其他定位和样式规则 */ } ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值