Vue进阶(九十三):show-overflow-tooltip实现表格列内容过长显示提示

网友投稿 1486 2022-05-30

Vue进阶(九十三):show-overflow-tooltip实现表格列内容过长显示提示

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

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

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

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

demo

1

2

3

4

5

6

Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:RK3399平台开发系列讲解(内核驱动外设篇)3.6、ALC5651 声卡驱动调试
下一篇:八十、 Springboot整合异步任务和定时任务
相关文章