el-table-column内容不自动换行

项目使用ElementUI,在显示时,如果某一个数值长度超过列宽,会默认换行,如下

el-table-column内容不自动换行_第1张图片

这样的话造成页面动态变化,很难看,可以通过给el-table-column增加show-overflow-tooltip样式来解决。


    

添加了该设置后,如果数据长度无法在指定宽度完全显示,多余的数据会默认隐藏,不会换行,当鼠标滑过该数据时,会以tip形式弹出所有数据内容。类似于下边

el-table-column内容不自动换行_第2张图片

鼠标移动到“测...”上,显示如下

el-table-column内容不自动换行_第3张图片

注意:该属性需要谨慎使用,如果一个页面多列使用,会影响页面加载速度。

优化参考:https://github.com/ElemeFE/element/issues/3478

你可能感兴趣的:(Vue,ElementUi,el-table-column,换行)