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

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

 

项目使用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
————————————————
版权声明：本文为优快云博主「木林森淼」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/yangfengjueqi/article/details/88821388