解決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找到相應節點去覆蓋。