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

clipboard.png
列头文字太长,把列头撑开了,怎么让列头不换行

回复
阅读 20.3k
5 个回答

根据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;

};

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

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

show-overflow-tooltip="true"

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

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏