https://www.cnblogs.com/YuKiee/p/9110894.html

在用vue+element-ui做一個(gè)后臺(tái)管理系統(tǒng)時(shí)，遇到這樣的問(wèn)題，?如圖：

使用el-table做一個(gè)表格，當(dāng)表頭內(nèi)容過(guò)長(zhǎng)時(shí)會(huì)換行，在不設(shè)置的寬度的時(shí)候每一列的寬度是等比例分配的，雖然element-ui中提供了width和min-width這個(gè)屬性可以自由設(shè)置。

但是因?yàn)橐龅谋砀窈芏?#xff0c;而且要一一計(jì)算比例然后再賦值給width也是一件很繁瑣的事。

認(rèn)真看了幾遍element-ui中table的文檔后，發(fā)現(xiàn)了一個(gè)這樣的屬性? render-header，文檔中描述為列標(biāo)題 Label 區(qū)域渲染使用的 Function，即渲染這一列的列標(biāo)題區(qū)域所用的函數(shù)。

不了解這個(gè)函數(shù)的使用方法的可以去查看vue文檔中渲染函數(shù)這一節(jié)，有很詳細(xì)的解釋。

然后我就利用這個(gè)函數(shù)重新設(shè)置列標(biāo)題的寬度，下面是代碼：

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.lengthlet f = 16 //每個(gè)字大小，其實(shí)是每個(gè)字的比例值，大概會(huì)比字體大小差不多大一點(diǎn)，column.minWidth = f*l //字大小乘個(gè)數(shù)即長(zhǎng)度 ,注意不要加px像素，這里minWidth只是一個(gè)比例值，不是真正的長(zhǎng)度//然后將列標(biāo)題放在一個(gè)div塊中，注意塊的寬度一定要100%，否則表格顯示不完全return h('div',{class:'table-head',style:{width:'100%'}},[column.label])},//....... }

css:

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

最后的效果圖：

當(dāng)表格過(guò)小時(shí)每個(gè)表頭會(huì)有一個(gè)最小值以保持單頭不換行繼續(xù)單行排列，底部出現(xiàn)滾輪，表格很大時(shí)就會(huì)自動(dòng)分配剩余空間。

?------------------------------------------------------------------更新-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

繼續(xù)往下寫(xiě)的過(guò)程中又遇到了問(wèn)題：在使用element-ui table的排序功能時(shí)，因?yàn)樯鲜鲆呀?jīng)將包含表頭文字的div塊的寬度設(shè)置成了100%,這樣一來(lái)，排序圖標(biāo)就被迫向下移，表頭行又換行了！！！

解決方法是：自己寫(xiě)樣式覆蓋原有的element-ui樣式,將排序圖標(biāo)設(shè)置成絕對(duì)定位

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

這個(gè)時(shí)候，會(huì)發(fā)先當(dāng)表格足夠小的時(shí)候，圖片會(huì)遮擋文字，如圖：

可以把該圖標(biāo)想象成每個(gè)表頭標(biāo)題又添加了一個(gè)文字，只需要在計(jì)算比例的時(shí)候，將這個(gè)圖片也算成一個(gè)文字長(zhǎng)度就可以了（ps:因?yàn)閳D片的大小與設(shè)置的文字大小差不多）

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

最后效果圖：

最后的最后，當(dāng)然偶爾也會(huì)有特殊需求，有時(shí)需要某一列特別寬，而不是代碼里寫(xiě)的那樣的比例，就可以直接在html里加上width屬性，最后這個(gè)屬性值會(huì)覆蓋render-header計(jì)算出來(lái)的屬性值，而其他的沒(méi)有設(shè)置固定寬的列仍然會(huì)按比例分配。

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

感謝@?嘵番茄?的回復(fù)，我才發(fā)現(xiàn)自己少了點(diǎn)東西，因?yàn)閑lement-ui本身的樣式結(jié)構(gòu)，表頭內(nèi)部有一定的padding值，通過(guò)上文計(jì)算出來(lái)的寬度比例，直接渲染到表頭仍然會(huì)出現(xiàn)表頭寬度不夠，多出的部分文字變成省略號(hào)的情況，因此需要將表頭內(nèi)部的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;}

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

總結(jié)

以上是生活随笔為你收集整理的element-ui表格表头内容 限制不换行的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。