解決element-ui表格表頭內容太長時的換行問題

在用vue+element-ui做一個后台管理系統時，遇到這樣的問題， 如圖：

使用el-table做一個表格，當表頭內容過長時會換行，在不設置的寬度的時候每一列的寬度是等比例分配的，雖然element-ui中提供了width和min-width這個屬性可以自由設置。

但是因為要做的表格很多，而且要一一計算比例然后再賦值給width也是一件很繁瑣的事。

認真看了幾遍element-ui中table的文檔后，發現了一個這樣的屬性  render-header，文檔中描述為列標題 Label 區域渲染使用的 Function，即渲染這一列的列標題區域所用的函數。

不了解這個函數的使用方法的可以去查看vue文檔中渲染函數這一節，有很詳細的解釋。

然后我就利用這個函數重新設置列標題的寬度，下面是代碼：

HTML:

<el-table border :data="tableData" v-loading="loading" @row-dblclick="handleSelect" :row-class-name="tableRowClassName">
      <el-table-column v-for="(item,index) in tableColumn" :label="item.name" :prop="item.prop" v-if="item.show" :key="index" align="center" :render-header="labelHead"></el-table-column>
</el-table>

VUE：

    methods:{
          labelHead(h,{column,index}){
                    let l = column.label.length
                    let f = 16 //每個字大小，其實是每個字的比例值，大概會比字體大小差不多大一點，
                   column.minWidth = f*l //字大小乘個數即長度 ,注意不要加px像素，這里minWidth只是一個比例值，不是真正的長度
　　　　　　　　　　　　//然后將列標題放在一個div塊中，注意塊的寬度一定要100%，否則表格顯示不完全
                  return h('div',{class:'table-head',style:{width:'100%'}},[column.label])
     
       },
    //.......
}            

css:

 .table-head{
    font-size:14px!important;//設置固定的字體大小
  }

最后的效果圖：

當表格過小時每個表頭會有一個最小值以保持單頭不換行繼續單行排列，底部出現滾輪，表格很大時就會自動分配剩余空間。

 ------------------------------------------------------------------更新-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

繼續往下寫的過程中又遇到了問題：在使用element-ui table的排序功能時，因為上述已經將包含表頭文字的div塊的寬度設置成了100%,這樣一來，排序圖標就被迫向下移，表頭行又換行了！！！

解決方法是：自己寫樣式覆蓋原有的element-ui樣式,將排序圖標設置成絕對定位

.el-table .cell{
  position:relative;
}
.el-table .caret-wrapper{
  position:absolute;
  top:2px;
  right:0;
}

這個時候，會發先當表格足夠小的時候，圖片會遮擋文字，如圖：

可以把該圖標想象成每個表頭標題又添加了一個文字，只需要在計算比例的時候，將這個圖片也算成一個文字長度就可以了（ps:因為圖片的大小與設置的文字大小差不多）

 let l = column.label.length
      let f = 16
      column.minWidth = f*(l+1)//加上一個文字長度
      return h('div',{class:'table-head',style:{width:'100%'}},[column.label])

最后效果圖：

最后的最后，當然偶爾也會有特殊需求，有時需要某一列特別寬，而不是代碼里寫的那樣的比例，就可以直接在html里加上width屬性，最后這個屬性值會覆蓋render-header計算出來的屬性值，而其他的沒有設置固定寬的列仍然會按比例分配。

————--------------------------------------------------------------------------------------------又更新---------------------------------------------------------------------------------------------------------------------------------------

感謝@ 嘵番茄 的回復，我才發現自己少了點東西，因為element-ui本身的樣式結構，表頭內部有一定的padding值，通過上文計算出來的寬度比例，直接渲染到表頭仍然會出現表頭寬度不夠，多出的部分文字變成省略號的情況，因此需要將表頭內部的padding值去掉:

 .el-table .cell, .el-table th div{
    padding:0!important;
  }
  .el-table tr td .cell{
    padding:5px 2px !important;
  }
  .el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
    padding-left:0 !important;
  }

需要注意的是，這些樣式直接寫到組件內部是不起作用的，想要覆蓋element-ui原本的樣式，我用的方法是新建了一個css文件，將樣式寫在該文件里，然后引入到main.js中，就可以覆蓋element-ui原來的樣式。如果需要局部覆蓋，在要改變的table上新加一個類名，再按html找到相應節點去覆蓋。