本文主要是介绍Vue进阶（九十三）：show-overflow-tooltip实现表格列内容过长显示提示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 一、前言
- 二、demo
- 三、拓展阅读
一、前言
在Vue项目中，使用ElementUI渲染表格数据时，如果某一个列数值长度超过列宽，会默认换行，造成显示不友好。
翻阅ElementUI文档，可发现show-overflow-tooltip列属性可实现列内容过长被隐藏时显示tooltip的功能。
注：show-overflow-tooltip属性需要谨慎使用，如果一个页面多列使用，会影响页面加载速度。因为show-overflow-tooltip 属性虽然可以解决文本超长时的问题，但当前是在所有的单元格中插入 tooltip 组件包装来简单实现的。
tooltip 组件使得 DOM 结构成倍增加，而且每个 tooltip 内部都有至少两个监听事件。这对大数据量表格来说性能是致命的。所以在中后台系统中大量数据的表格展示需要优化改进。
二、demo
<el-table-column:show-overflow-tooltip="true"prop="EMAIL"label="电子邮件">
</el-table-column>
三、拓展阅读
- 《Vue进阶（幺陆零）：el-table之show-overflow-tooltip 属性不生效》
这篇关于Vue进阶（九十三）：show-overflow-tooltip实现表格列内容过长显示提示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
