【转载】前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示

element表格内容过多，鼠标悬浮显示全部内容（show-overflow-tooltip)，内容过长显示悬浮抖动
el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示
在table中设置了show-overflow-tooltip后,当某一列字符内容超长时,鼠标移入会出现闪烁不显示提示

解决方法：
方法一：可以使用el-popover代替tooltip

可以使用el-popover代替tooltip, 且重写el-popover的样式, 保持跟tooltip提示框样式一致：

【重点】：修改el-popover样式需要放在不含scoped的style样式中，为了防止污染全局的el-popover样式，可以给popper添加类名：

所以修改el-popover样式为：
注意：这个一定要自己写类名，否则放在不含scoped的style中会污染全局样式

效果图：

方法二：使用show-overflow-tooltip超过一定的行数显示...

使用show-overflow-tooltip超过一定的行数，通过样式控制显示...

样式：

其中-webkit-line-clamp是要显示的行数，例子显示12行。

效果图：

方法三：使用el-tooltip太长的时候显示滚动条【好用，推荐】

     

 

isShowTooltip: false,

获取可视宽度

onMouseOver(str) {
   // 内容超出，显示文字提示内容
   let tag = this.$refs[str];
   let parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度
   let contentWidth = tag.offsetWidth; // 获取元素可视宽度
   this.isShowTooltip = contentWidth <= parentWidth;
},

注意样式写在不带scoped的style里面，为了避免影响其它样式，使用了自定义样式popper-class=“workorder-reason-popper”

效果图，带滚动条的鼠标hover显示全部：

————————————————
版权声明：本文为CSDN博主「migexiaoliang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/migexiaoliang/article/details/126335789