平时使用element ui的tabled 是，我想大家应该都会经常遇到这样的问题，表头内容过长时会换行，造成整个表格很不美观，下面我就这个问题说一下问题如何解决
<el-table-column
:render-header="labelHead"
:prop="col.filedName"
show-overflow-tooltip="true"
sortable
:label="col.alias"
:formatter="formatterTableCol">
</el-table-column>
methods: {
labelHead: function(h, { column, $index }) {
let l = column.label.length
let f = 16
column.minWidth = f * (l + 2)//加上一个文字长度
return h('div', { class: 'table-head', style: { width: '100%' } }, [column.label])
},
}
css:
/*设置表头样式*/
.station-search .table-head {
font-size: 14px !important;
}
.station-search .el-table .caret-wrapper{
position:absolute;
top:2px;
right:0;
}
.station-search .el-table .cell, .el-table th div{
padding:0!important;
}
.station-search .el-table tr td .cell{
padding:5px 2px !important;
}
.station-search .el-table .cell,
.station-search .el-table th div,
.station-search .el-table--border td:first-child .cell,
.station-search .el-table--border th:first-child .cell{
padding-left:0 !important;
}
/*设置表头样式*/
主要：修改elementui的默认样式，不能在<style scoped></style>内修改，否则无效，必须在<style ></style>
内编写，我增加station-search这个是为了防止其他表格也受到影响
这个解决方法：引用于https://blog.csdn.net/weixin_34364979/article/details/79476865
