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-09Vue中引入bootstrap.min.css的正確姿勢(shì)分享
這篇文章主要介紹了Vue中引入bootstrap.min.css的正確姿勢(shì),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue實(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-03vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項(xiàng)目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過(guò)引用并調(diào)用ElQuarterPicker.vue組件來(lái)實(shí)現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧2024-09-09vue實(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-05vue中對(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