vue项目中使用element的表格组件一行展示过长数据-show-overflow-tooltip完美解决

在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"
  prop="eventDesc"
  :label="tabName[1]"
  width="92px"
></el-table-column>

效果