博客

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

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

<el-table-column prop="goodscode" label="货物代码" width="80" show-overflow-tooltip>
    <template scope="scope">
        <div style="text-decoration:underline;cursor:pointer;">
            {{ scope.row.goodscode}}
        </div>
    </template>
</el-table-column>

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

鼠标移动到“测…”上，显示如下

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

优化参考：

https://github.com/ElemeFE/element/issues/3478