element-ui表格表头内容显示完整，不换行_element ui 表格不换行

平时使用 element ui 的 table 时，我想大家应该都会经常遇到这样的问题，表头内容过长时会换行，造成整个表格很不美观，下面我就这个问题说一下问题如何解决

<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这个是为了防止其他表格也受到影响
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

这个解决方法：引用于https://blog.csdn.net/weixin_34364979/article/details/79476865
原文地址：element-ui表格表头内容显示完整，不换行