show-overflow-tooltip实现表格列内容过长显示提示

最新推荐文章于 2024-02-27 09:06:41 发布

她说她说

最新推荐文章于 2024-02-27 09:06:41 发布

阅读量1.6k

点赞数

分类专栏： vue2 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43203982/article/details/117689836

版权

15 篇文章 0 订阅

订阅专栏

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

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

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

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

示例

 <el-table-column
	 :show-overflow-tooltip="true"
	  align="center"
	  prop="status"
	  label="测试测试"
	  width="100"/>

关注