Vue进阶（九十三）：show-overflow-tooltip实现表格列内容过长显示提示_vue tooltip超出宽度提示

最新推荐文章于 2024-07-09 14:56:30 发布

2401_84617356

最新推荐文章于 2024-07-09 14:56:30 发布

阅读量817

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84617356/article/details/138959894

版权

107 篇文章 0 订阅

订阅专栏

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

在Vue项目中，使用ElementUI渲染表格数据时，如果某一个列数值长度超过列宽，会默认换行，造成显示不友好。

翻阅ElementUI文档，可发现show-overflow-tooltip列属性可实现列内容过长被隐藏时显示tooltip的功能。

注：show-overflow-tooltip属性需要谨慎使用，如果一个页面多列使用，会影响页面加载速度。因为show-overflow-tooltip 属性虽然可以解决文本超长时的问题，但当前是在所有的单元格中插入 tooltip 组件包装来简单实现的。

tooltip 组件使得 DOM 结构成倍增加，而且每个 tooltip 内部都有至少两个监听事件。这对大数据量表格来说性能是致命的。所以在中后台系统中大量数据的表格展示需要优化改进。

<el-table-column
 :show-overflow-tooltip="true"
 prop="EMAIL"
 label="电子邮件"
 >
</el-table-column>

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

关注