el-table表头文字换行的三种方式

问题描述

表格中的表头一般都是不换行的,不过有时候在某些业务场景中,需要让表头的文字换行展示一下,我们先看一下效果图

效果图

el-table表头文字换行的三种方式_第1张图片

三种方式的代码

看注释就行啦。

演示的话,直接复制粘贴运行就行啦




关于white-space不赘述,详情查询官方文档: https://developer.mozilla.org...

总结

三种方式各有特色,但是render-header会略为耗费一点点性能。

若为固定表头数据,则优先推荐使用表头插槽方式,其次推荐换行符加css方式。
若为动态数据,则只能使用表头renderheader函数了

若有更好的方式,欢迎交流 ^_^

你可能感兴趣的:(element-ui换行)