平時(shí)使用element ui的tabled 是惧蛹，我想大家應(yīng)該都會(huì)經(jīng)常遇到這樣的問題扇救，表頭內(nèi)容過長時(shí)會(huì)換行，造成整個(gè)表格很不美觀香嗓，下面我就這個(gè)問題說一下問題如何解決
<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)//加上一個(gè)文字長度
return h('div', { class: 'table-head', style: { width: '100%' } }, [column.label])
},
}
css:
/*設(shè)置表頭樣式*/
.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;
}
/*設(shè)置表頭樣式*/
主要：修改elementui的默認(rèn)樣式迅腔，不能在<style scoped></style>內(nèi)修改，否則無效靠娱，必須在<style ></style>
內(nèi)編寫沧烈，我增加station-search這個(gè)是為了防止其他表格也受到影響
這個(gè)解決方法：引用于https://blog.csdn.net/weixin_34364979/article/details/79476865
