在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"/>