elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
項(xiàng)目上有一個(gè)需求,需要用el-table來顯示數(shù)據(jù),有一個(gè)要求就是不能換行。表頭不能換行,表格里面的內(nèi)容也不能換行。
同事寫的頁面使用的是vue3,自定義了一個(gè)事件來動(dòng)態(tài)變化每一列的參數(shù)。我將其挪用到vue2中完全沒法使用。只能在網(wǎng)上查找資料來實(shí)現(xiàn)它。
表格通過接口來獲取,接口中將表頭標(biāo)題和表格內(nèi)容分開來的。
基本思路就是:表格內(nèi)容限制不換行,不使用縮略符號(hào)。
首先從表頭開始,在el-table-column中有一個(gè)render-header
// 表頭部重新渲染
renderHeader(h, { column, $index }) {
// 新建一個(gè) span
let span = document.createElement('span');
// 設(shè)置表頭名稱
span.innerText = column.label;
// 臨時(shí)插入 document
document.body.appendChild(span);
// 重點(diǎn):獲取 span 最小寬度,設(shè)置當(dāng)前列,注意這里加了 20,字段較多時(shí)還是有擠壓,且渲染后的 div 內(nèi)左右 padding 都是 10,所以 +20 。(可能還有邊距/邊框等值,需要根據(jù)實(shí)際情況加上)
column.minWidth = (span.getBoundingClientRect().width) + 40;
this.headerLableWidth[column.property] = column.minWidth;
// 移除 document 中臨時(shí)的 span
document.body.removeChild(span);
return h('span', column.label);
},column中有這些標(biāo)題文字信息, 創(chuàng)建一個(gè)span標(biāo)簽,添加到文檔流中,然后拿到它的寬度,為了多加點(diǎn)寬度,可以額外多加些數(shù)值。代碼中多加了40寬度。為表頭設(shè)置最小寬度。
記錄這一列的最小寬度,當(dāng)表格內(nèi)容動(dòng)態(tài)設(shè)置寬度的時(shí)候,至少要給定成表頭的寬度。不然表頭會(huì)因?yàn)闆]有內(nèi)容寬度變成0.
flexColumnWidth(str, arr1, flag = 'max'){
// str為該列的字段名(傳字符串);tableData為該表格的數(shù)據(jù)源(傳變量);
// flag為可選值,可不傳該參數(shù),傳參時(shí)可選'max'或'equal',默認(rèn)為'max'
// flag為'max'則設(shè)置列寬適配該列中最長的內(nèi)容,flag為'equal'則設(shè)置列寬適配該列中第一行內(nèi)容的長度。
str = str + ''
let columnContent = ''
if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
return
}
if (!str || !str.length || str.length === 0 || str === undefined) {
return
}
if (flag === 'equal') {
// 獲取該列中第一個(gè)不為空的數(shù)據(jù)(內(nèi)容)
for (let i = 0; i < arr1.length; i++) {
if (arr1[i][str].length > 0) {
// console.log('該列數(shù)據(jù)[0]:', arr1[0][str])
columnContent = arr1[i][str]
break
}
}
} else {
// 獲取該列中最長的數(shù)據(jù)(內(nèi)容)
let index = 0
for (let i = 0; i < arr1.length; i++) {
if (arr1[i][str] === null) {
return
}
const now_temp = arr1[i][str] + ''
const max_temp = arr1[index][str] + ''
if (now_temp.length > max_temp.length) {
index = i
}
}
columnContent = arr1[index][str]
}
// console.log('該列數(shù)據(jù)[i]:', columnContent)
// 以下分配的單位長度可根據(jù)實(shí)際需求進(jìn)行調(diào)整
let flexWidth = 0
for (const char of String(columnContent)) {
if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
// 如果是英文字符,為字符分配8個(gè)單位寬度
flexWidth += 10
} else if (char >= '\u4e00' && char <= '\u9fa5') {
// 如果是中文字符,為字符分配15個(gè)單位寬度
flexWidth += 18
} else {
// 其他種類字符,為字符分配8個(gè)單位寬度
flexWidth += 10
}
}
if (flexWidth < this.headerLableWidth[str]) {
// 設(shè)置最小寬度
flexWidth = this.headerLableWidth[str]
}
// if (flexWidth > 250) {
// // 設(shè)置最大寬度
// flexWidth = 250
// }
// console.log(flexWidth)
return flexWidth + 'px'
}
}el-table-column標(biāo)簽中的width使用函數(shù)方法來代替。
完整的el-table如下
<el-table
:ref='tableRef'
:data="certRecordInfos"
border
:fit="true"
style="width: 100%">
<el-table-column
align="center"
:render-header="renderHeader"
:width="flexColumnWidth(item.key,certRecordInfos)"
:key="item.key"
:prop="item.key"
:label="item.value" >
</el-table-column>
</el-table>因?yàn)樾枰全@取到表頭的最小寬度,因此需要先加載表頭,才能確保后面加載表格內(nèi)容的時(shí)候,能正確的設(shè)置寬度。
在watch中,觀察這兩個(gè)數(shù)組,當(dāng)發(fā)現(xiàn)變化的時(shí)候,去重新刷新這個(gè)table
certHeaderList: {
deep: true,
handler: function (val) {
this.$nextTick(() => {
this.$refs[`${this.tableRef}`].doLayout();
})
}
},
certRecordInfos: {
deep: true,
handler: function (val) {
this.$nextTick(() => {
this.$refs[this.tableRef].doLayout();
})
}
} this.certHeaderList.splice(0)
this.certRecordInfos.splice(0)
const resultHeader = val[0].header
resultHeader.forEach((header)=>{
let map = {key:header.columnName,value:header.columnDesc};
this.certHeaderList.push(map);
});
setTimeout(() => {
const resultList = val[0].list
this.certRecordInfos.push(...resultList)
}, 1000);要實(shí)現(xiàn)效果,必須要確保已經(jīng)拿到了表格每一列表頭的最小寬度。并使用headerLableWidth記錄下來。
另外,需要為表格內(nèi)容進(jìn)行設(shè)置,確保內(nèi)容不會(huì)進(jìn)行換行和使用縮略符號(hào)。
/deep/ .el-table th, .el-table td {
white-space: nowrap;
}
/deep/ .el-table .cell {
display: inline-block;
white-space: nowrap;
width: auto;
overflow: auto;
}
/deep/ .el-table .el-table__body-wrapper {
overflow-x: auto;
}總結(jié)
到此這篇關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的文章就介紹到這了,更多相關(guān)el-table表頭和內(nèi)容一行顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何基于uniapp開發(fā)android播放webrtc流詳解
這篇文章主要介紹了在uniapp中播放RTSP和WebRTC協(xié)議流的區(qū)別,以及如何封裝WebrtcVideo組件和音視頻實(shí)時(shí)通訊的實(shí)現(xiàn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
Vue webpack 項(xiàng)目自動(dòng)打包壓縮成zip文件的方法
這篇文章主要介紹了Vue -- webpack 項(xiàng)目自動(dòng)打包壓縮成zip文件的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
Vue3?通過作用域插槽實(shí)現(xiàn)樹形菜單嵌套組件
這篇文章主要為大家介紹了Vue3?通過作用域插槽實(shí)現(xiàn)樹形菜單嵌套組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
解決vue-router進(jìn)行build無法正常顯示路由頁面的問題
下面小編就為大家分享一篇解決vue-router進(jìn)行build無法正常顯示路由頁面的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue項(xiàng)目報(bào)錯(cuò):parseComponent問題及解決
這篇文章主要介紹了Vue項(xiàng)目報(bào)錯(cuò):parseComponent問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
使用vue和datatables進(jìn)行表格的服務(wù)器端分頁實(shí)例代碼
本篇文章主要介紹了使用vue和datatables進(jìn)行表格的服務(wù)器端分頁實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06

