elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
項(xiàng)目上有一個(gè)需求,需要用el-table來(lái)顯示數(shù)據(jù),有一個(gè)要求就是不能換行。表頭不能換行,表格里面的內(nèi)容也不能換行。
同事寫(xiě)的頁(yè)面使用的是vue3,自定義了一個(gè)事件來(lái)動(dòng)態(tài)變化每一列的參數(shù)。我將其挪用到vue2中完全沒(méi)法使用。只能在網(wǎng)上查找資料來(lái)實(shí)現(xiàn)它。
表格通過(guò)接口來(lái)獲取,接口中將表頭標(biāo)題和表格內(nèi)容分開(kāi)來(lái)的。
基本思路就是:表格內(nèi)容限制不換行,不使用縮略符號(hào)。
首先從表頭開(kāi)始,在el-table-column中有一個(gè)render-header
// 表頭部重新渲染
renderHeader(h, { column, $index }) {
// 新建一個(gè) span
let span = document.createElement('span');
// 設(shè)置表頭名稱(chēng)
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)闆](méi)有內(nèi)容寬度變成0.
flexColumnWidth(str, arr1, flag = 'max'){
// str為該列的字段名(傳字符串);tableData為該表格的數(shù)據(jù)源(傳變量);
// flag為可選值,可不傳該參數(shù),傳參時(shí)可選'max'或'equal',默認(rèn)為'max'
// flag為'max'則設(shè)置列寬適配該列中最長(zhǎng)的內(nèi)容,flag為'equal'則設(shè)置列寬適配該列中第一行內(nèi)容的長(zhǎng)度。
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 {
// 獲取該列中最長(zhǎng)的數(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)
// 以下分配的單位長(zhǎng)度可根據(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 {
// 其他種類(lèi)字符,為字符分配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ù)方法來(lái)代替。
完整的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記錄下來(lái)。
另外,需要為表格內(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)文章
vue-cli監(jiān)聽(tīng)組件加載完成的方法
今天小編就為大家分享一篇vue-cli監(jiān)聽(tīng)組件加載完成的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue中引入bootstrap.min.css的正確姿勢(shì)分享
這篇文章主要介紹了Vue中引入bootstrap.min.css的正確姿勢(shì),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法,文中的實(shí)現(xiàn)步驟講解詳細(xì),并且有詳細(xì)的代碼示例,需要的小伙伴可以參考一下2023-10-10
如何使用yarn創(chuàng)建vite+vue3&&electron多端運(yùn)行
這篇文章主要介紹了如何使用yarn創(chuàng)建vite+vue3&&electron多端運(yùn)行,本文分步驟給大家介紹的非常詳細(xì),包括使用yarn創(chuàng)建vite+vue3項(xiàng)目會(huì)遇到哪些問(wèn)題,感興趣的朋友跟隨小編一起看看吧2024-03-03
vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項(xiàng)目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過(guò)引用并調(diào)用ElQuarterPicker.vue組件來(lái)實(shí)現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果
這篇文章主要介紹了vue實(shí)現(xiàn)編輯器鍵盤(pán)抬起時(shí)內(nèi)容跟隨光標(biāo)距頂位置向上滾動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)
這篇文章主要介紹了vue中對(duì)象數(shù)組去重的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02

