element-ui 怎么让table的列头不换行

Question

列头文字太长，把列头撑开了，怎么让列头不换行

Answer 1

根据el的api实现的解决方案，
通过 table 的 render-header 自己手动处理label

:render-header ="labelFunction"

labelFunction 代码如下:
global.elTableHeadFunction = function (h,l,fontSize) {

let f = 14;
if(typeof(fontSize) != "undefined" && fontSize != null){
    f = fontSize;
}
//列头的实际宽度
let width = l.column.realWidth;
//14：字体大小 32 是el表格的左右 padding 的合
let maxFontCount = Math.floor((width-32)/f)-1;
let chars =  l.column.label.split("");
var label = "";
if(maxFontCount < chars.length){
    for (let i = 0; i < maxFontCount; i++){
        label += chars[i];
    }
    label +="..";
}else{
    label = l.column.label;
}
return label;

};

Answer 2

加个css white-space: nowrap;不过不建议这么做，这样显示不完表头，你这个就是太窄的空间要塞一堆东西--！

.el-table th>.cell {
    white-space: nowrap;
}

Answer 3

show-overflow-tooltip="true"

Answer 4

<el-table-column prop="UserName" label="人员名称" :min-width="'人员名称'.length*35" sortable></el-table-column>

Answer 5

.listView .el-table .el-table__header-wrapper thead tr th {
white-space: nowrap!important;
}