ElementUI中的el-table解決寬度問題 - 根據內容自動撐開

? ? ? ? 在使用element-ui中，會發現表格組件el-table在未指定寬度情況下，會自動計算并給表格寬度賦值。但實際開發中，有時需要根據內容實際長度自動撐開顯示，由內容的多少而決定表格的寬度，而不是默認寬度為100%。在默認情況下表格寬度為100%顯示，并且列項未指定寬度情況下，剩余部分會平均分配寬度，如下圖：

圖1-默認情況寬度為100%

? ? ? ? 本案例實際需求如下圖所示，由內容自動撐開顯示。

圖2-根據內容自動撐開

一、演示頁面

? ? ? ? 首先創建Vue2項目，并新建演示頁面，頁面代碼如下：

<template><div><el-table size="mini" border :data="tableData"><el-table-column type="index" label="序號" width="50px"></el-table-column><el-table-column label="名稱" prop="name"></el-table-column><el-table-column label="內容" prop="content"></el-table-column><el-table-column label="圖片" prop="thumb"><template slot-scope="scope"><div class="thumb"><img v-if="scope.row.thumb" :src="scope.row.thumb" class="img" /></div></template></el-table-column><el-table-column label="創建時間" prop="createtime"></el-table-column><el-table-column label="更新時間" prop="updatetime"></el-table-column></el-table></div>
</template><script>
import AutoTable from './autoTable'
export default {data(){return {tableData: [{name: "Angular", content: "This is Angular Javascript", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "VueJs", content: "This is Vue Javascript", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "NuxtJs", content: "This is Nuxt Javascript", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "React", content: "This is React Javascript", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "Dog", content: "This is Dog Javascript", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}]}}
}
</script><style lang="less" scoped>
.thumb{position: relative;img{ display: block; }.img{width: 30px;}.hover{display: none;width: 200px;position: absolute;left: 35px;top: 0;z-index: 1000;}&:hover{.hover{ display: block; }}
}
</style>

? ? ? ? 以上代碼創建好后，顯示為“圖1”中的效果。

二、樣式調整

? ? ? ? 如下圖所示，element-ui中默認表格樣式.cell為塊級元素，為了能獲取到內容真實的寬度，這里需要將其修改為行內塊，這樣就能獲取到內容的寬度了。

? ? ? ? 這里使用的是less預編譯器，樣式代碼如下：

<style lang="less" scoped>
// 略.../deep/ .el-table .cell{ display: inline-block; }
/deep/ .el-table th.el-table__cell>.cell{ display: inline-block; width: auto; }
</style>

? ? ? ? 如上圖，樣式內容添加后，選擇元素則是按內容實際寬度區域進行顯示。

三、directives中定義鉤子函數

????????Vue.directive構子函數對于組件中元素的改造是非常方便的，此時需要添加一個可以自動處理表格寬度的自定義指令，用于統一處理項目中需要根據內容自動撐開的表格。

? ? ? ? 對于Vue.directive介紹之前一篇已介紹過，不清楚朋友可以前去了解一下，地址：Element-UI - 解決el-table中圖片懸浮被遮擋問題_vuetable的圖片放大后總是浮于文字下方-CSDN博客

? ? ? ? 由于本人項目將表格組件進行了封裝，所以這里使用局部自定義指令方法，如需全局處理可以將其功能移至全局文件中定義。

? ? ? ? 代碼如下：

export default {data(){return {tableData: [{name: "Angular", content: "This is Angular Javascript", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "VueJs", content: "This is Vue Javascript", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "NuxtJs", content: "This is Nuxt Javascript", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "React", content: "This is React Javascript", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "Dog", content: "This is Dog Javascript", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}]}},directives: {// 自定義v-autotableautotable: {inserted: (el, binding) =>  {}}},
}

? ? ? ? 注意：自定義指令中inserted鉤子函數是在被綁定元素插入父節點時調用，只執行一次。

四、定義AutoTable類

? ? ? ? 定義AutoTable類，用于獲取每列內容的實際寬度，并通過獲取每列中最大的內容寬度計算出表格的寬。
? ? ? ?代碼如下：

/*** 定義類 - 自定義表格寬度*/
class AutoTable{constructor(){this.timerHandle = null;        //計時器手柄}// 開始重新計算表格寬度start(el, binding){}
}
export default AutoTable;

? ? ? ? 本類計時器是用于延遲獲取內容部分DOM，當內容讀取到后通過或滿足某些條件后，通過this.timerHandle進行清除計時器。

五、修改表格寬度

????????如下圖可見，element-ui中的表格組件，是分頭部標題部分和內容部分。所以要分兩部分獲取，先獲取頭部對應列內容的寬度，再獲取內容部分的列中所有內容的寬度，合并到一個數組中，篩選出每列中的最大寬度作為列寬。

? ? ? ? 下面實現原理和邏輯就不作細說了，每行代碼都已添加備注并說明作用，大家可以慢慢細品。代碼如下：

/*** 定義類 - 修正表格寬度*/
class AutoTable{constructor(){this.timerHandle = null;        //計時器手柄}// 開始重新計算表格寬度start(el, binding){// 如果值為false， 則不進行計算處理if(!binding.value) return;const headerDOM = el.querySelector('.el-table__header-wrapper'),      // 頭部DOMbodyDOM = el.querySelector('.el-table__body-wrapper');          // 內容DOM// 先清除舊計時器clearInterval(this.timerHandle);// 開始計時this.timerHandle = setInterval(() => {const tds = bodyDOM.querySelectorAll('table tbody tr'),             // 獲取內容行數ths = headerDOM.querySelectorAll('table thead th .cell'),       // 獲取頭部列元素emptyDOM = el.querySelector('.el-table__empty-text');         // 獲取空DOM節點// 如果滿足條件，結束計時器if(null != emptyDOM || tds.length>0) {clearInterval(this.timerHandle);}if(tds.length == 0 && ths.length == 0)  return;// 定義變量 存儲每列的寬度數據const widths = [];            // 二維數組，存儲行和列數據// 獲取標題中的單元格寬度ths.forEach((item, i) => widths[i] = [item.offsetWidth]);// 獲取內容部分列的單元格寬度tds.forEach(trEle => {const cells = trEle.querySelectorAll('td .cell');cells.forEach((item, i) => widths[i].push(item.offsetWidth))});// 定義存儲每列中最大值寬度數組const maxWidth = [];// 獲取每列中寬度最大值內容widths.forEach((arr, i) => maxWidth[i] = arr.reduce((maxValue, item) => Math.max(maxValue, item), arr[0]));// 定義變量存儲表格寬度（追加內填充10）const realWidth = maxWidth.reduce((total, value) => total + value, 0) + (maxWidth.length * 10);// 修改表格寬度if(realWidth>0) el.style.width = realWidth + 'px';}, 50);}
}export default AutoTable;

? ? ? ? 頁面中在el-table標簽上添加v-autotable，并且引入autotable.js文件，在組件注冊插入時，實例類對象并執行start()函數，代碼如下：

<template><div><el-table size="mini" border :data="tableData"  v-autotable="true"><el-table-column type="index" label="序號" width="50px"></el-table-column><el-table-column label="名稱" prop="name"></el-table-column><el-table-column label="內容" prop="content"></el-table-column><el-table-column label="圖片" prop="thumb"><template slot-scope="scope"><div class="thumb"><img v-if="scope.row.thumb" :src="scope.row.thumb" class="img" /></div></template></el-table-column><el-table-column label="創建時間" prop="createtime"></el-table-column><el-table-column label="更新時間" prop="updatetime"></el-table-column></el-table></div>
</template><script>
import AutoTable from './autoTable'
export default {data(){return {tableData: [{name: "Angular", content: "This is Angular Javascript", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "VueJs", content: "This is Vue Javascript", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "NuxtJs", content: "This is Nuxt Javascript", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "React", content: "This is React Javascript", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "Dog", content: "This is Dog Javascript", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}]}},directives: {// 自定義懸浮v-autotableautotable: {inserted: (el, binding) =>  new AutoTable().start(el, binding),}},
}
</script>

? ? ? ? 此時頁面效果如下圖，細心朋友會發現此時未指定列寬部分的列，是等寬顯示并出現換行的情況，并未按每列最大實際寬度顯示，這個問題下面再細講。

六、colgroup

? ? ? ? 在解決列寬問題前，先來了解下colgroup。< colgroup > 元素用于設置表的特定列的樣式，< colgroup > 元素應該用作列規范的容器，每個組都使用 < col> 元素指定，span 屬性指定獲取樣式的列數，style 屬性指定列的樣式。

注意: < colgroup > 標記必須是一個 < table > 元素的子元素，并且應該放在任何其他表元素之前，如 < head > 、 < tr > 、 < td > 等，但是如果存在的話，應該放在 < caption > 元素之后。

????????在 colgroup 中允許使用的 CSS 屬性的選擇非常有限，合法 CSS 屬性如下：

名稱描述
width設置寬度
visibility是否可見
background背景樣式
border邊界線

????????所有其他 CSS 屬性對表沒有影響。

七、修整每列的寬度

? ? ? ? 如下圖可見，Element-ui組件中表格的列寬，是通過colgroup > col對每列寬進行控制的；所以要控制每列的寬度，則需要將其修正為之前獲取第列內容寬最大值即可。

? ? ? ? 代碼如下：

class AutoTable{// 略...// 開始重新計算表格寬度start(el, binding){// 如果值為false， 則不進行計算處理if(!binding.value) return;const headerDOM = el.querySelector('.el-table__header-wrapper'),      // 頭部DOMbodyDOM = el.querySelector('.el-table__body-wrapper');          // 內容DOM// 先清除舊計時器clearInterval(this.timerHandle);// 開始計時this.timerHandle = setInterval(() => {const tds = bodyDOM.querySelectorAll('table tbody tr'),             // 獲取內容行數ths = headerDOM.querySelectorAll('table thead th .cell'),       // 獲取頭部列元素emptyDOM = el.querySelector('.el-table__empty-text');         // 獲取空DOM節點// 略...// 修改表格寬度if(realWidth>0) el.style.width = realWidth + 'px';// 獲取colgroupconst headerColGroup = headerDOM.querySelectorAll('colgroup col'),bodyColGroup = bodyDOM.querySelectorAll('colgroup col');// 修改每列寬度maxWidth.forEach((val, i) => {headerColGroup[i].style.width = val + 'px';bodyColGroup[i].style.width = val + 'px';});}, 50);}
}

? ? ? ? 通過獲取表格header中的colgroup > col 和body中的colgroup > col元素，再通過將第列中最大內容寬度賦值到對應列的col上即可。當上述代碼執行后，再查看col屬性則發現列的值已發生改變，如下圖：

? ? ? ? 頁面效果如下圖，此時第列中都以最大內容寬度顯示，表格寬度根據內容長度變化而改變。

八、更新寬度

? ? ? ? 由于inserted是在元素第一次插入時執行，只調用一次，所以當表格中數據變化，就需要使用到update和componentUpdated了。這里使用componentUpdated，它是在指令所在組件的 VNode 及其子 VNode 全部更新后調用。

? ? ? ? 代碼如下：

import AutoTable from './autoTable'
export default {data(){return {tableData: [{name: "Angular", content: "This is Angular Javascript", thumb: require("@/assets/angular.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "VueJs", content: "This is Vue Javascript", thumb: require("@/assets/logo.png"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "NuxtJs", content: "This is Nuxt Javascript", thumb: require("@/assets/nuxtjs.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "React", content: "This is React Javascript", thumb: require("@/assets/react.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"},{name: "Dog", content: "This is Dog Javascript", thumb: require("@/assets/dog.jpg"), createtime: "2024/6/15", updatetime: "2024/6/15"}]}},directives: {// 自定義懸浮v-autotableautotable: {inserted: (el, binding) =>  new AutoTable().start(el, binding),componentUpdated: (el, binding) =>  new AutoTable().start(el, binding)}},
}

? ? ? ? 雖然此方法不是真正意義上根據內容寬度自動撐開的，但也達到了預期中的效果，希望對大家有所幫助。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/40101.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/40101.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/40101.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

監控平臺zabbix對接grafana

監控平臺zabbix對接grafana

目錄 1.安裝grafana并啟動 2.瀏覽器訪問 3.導入zabbix數據&#xff0c;對接grafana 4.如何導入模板 5.使用zabbix監控nginx并發量連接數 5.1 修改nginx配置 5.2 編寫監控數據腳本 5.3 設置鍵值 5.4 在zabbix web端完成自定義監控項 5.5 連接到grafana 以上一篇博客&l…
閱讀更多...
使用CubeIDE調試項目現stm32 no source available for “main() at 0x800337c：

使用CubeIDE調試項目現stm32 no source available for “main() at 0x800337c：

使用CubeIDE調試項目現stm32 no source available for "main() at 0x800337c&#xff1a; 問題描述 使用CubeIDE編譯工程代碼和下載都沒有任何問題&#xff0c;點擊Debug調試工程時&#xff0c;出現stm32 no source available for "main() at 0x800337c 原因分析&a…
閱讀更多...
聊聊C++20的三向比較運算符 `＜=＞`

聊聊C++20的三向比較運算符 `＜=＞`

C20標準引入了許多新特性&#xff0c;其中之一是三向比較運算符 <>&#xff0c;也被稱為太空船運算符。這個新運算符為C程序員提供了一種全新的比較對象的方式&#xff0c;它能有效簡化比較邏輯&#xff0c;避免編寫多個比較運算符重載的情況。 為什么需要三向比較運算符…
閱讀更多...
VirtualBox Ubuntu Sever配置雙網卡

VirtualBox Ubuntu Sever配置雙網卡

Ubuntu 版本&#xff1a;Ubuntu Server 2404 vitrualBox 網卡配置&#xff1a; 如上配置后&#xff0c;ifconfig 只能看到 網卡1 應用了。要應用 網卡2 需要更改文件 /etc/netplan/50-cloud-init.yaml&#xff08;不同的ubuntu版本這個文件名可能不同&#xff09; 首先 ifcon…
閱讀更多...
6.BeanFactory處理器Bean處理器

6.BeanFactory處理器Bean處理器

BeanFactoryPostProcessor BeanFactoryProcessor是Bean工廠處理器&#xff0c;對beanFactory的進行擴展&#xff0c;可以解析Configuration Bean注解。 主要功能是對BeanFactory的補充。 //獲取所有bean工廠的處理器<Bean名字&#xff0c;bean工廠處理器>Map<Strin…
閱讀更多...
Simulink中的S函數深入解析

Simulink中的S函數深入解析

Simulink中的S函數深入解析 在Simulink環境中&#xff0c;S函數&#xff08;Simulink Functions&#xff09;扮演著至關重要的角色&#xff0c;它們允許用戶將自定義算法和行為集成到Simulink模型中。本文將詳細探討S函數的定義、應用和編寫方法&#xff0c;以及在模型中如何利…
閱讀更多...
Android設備信息（DevInfo）

Android設備信息（DevInfo）

軟件介紹 設備信息&#xff08;DevInfo&#xff09;一款評分非常不錯的手機硬件及各種信息檢測應用&#xff0c;安卓設備硬件檢測工具。可以全面查看手機的各種信息、包括&#xff1a;Android系統版本的詳細信息、芯片CPU處理器的詳細信息、全球衛星定位、測試功能、硬件溫度、…
閱讀更多...
Python爬蟲技術及其原理探秘

Python爬蟲技術及其原理探秘

導言 隨著互聯網的發展&#xff0c;大量的數據被存儲在網絡上&#xff0c;而我們需要從中獲取有用的信息。Python作為一種功能強大且易于學習的編程語言&#xff0c;被廣泛用于網絡爬蟲的開發。本文將詳細介紹Python爬蟲所需的技術及其原理&#xff0c;并提供相關的代碼案例。…
閱讀更多...
c++高階-1-模板

c++高階-1-模板

文章目錄 模板一、模板基本語法二、函數模板1.基本語法2.函數模板注意事項3.普通函數和函數模板區別4.普通函數和函數模板調用規則 三、類模板1.基本語法2.類模板和函數模板的區別3.類模板中成員函數調用時機4.類模板對象做函數參數5.類模板與繼承6.成員函數的類外實現 模板 一…
閱讀更多...
Ansys Zemax｜場曲跟畸變圖的前世今生

Ansys Zemax｜場曲跟畸變圖的前世今生

實現 OpticStudio通過在X和Y方向&#xff08;弧矢和子午方向&#xff09;的傍軸光線追蹤確定近軸圖像平面的Z坐標&#xff0c;并測量該近軸焦平面與系統圖像平面的Z坐標之間的距離。 切向數據是沿Z軸從圖像平面到近軸圖像平面在切向&#xff08;YZ&#xff09;平面測量的距離…
閱讀更多...
Qt Creator配置以及使用Git

Qt Creator配置以及使用Git

Qt Creator配置以及使用Git 引言一、Qt Creator配置git二、Qt Creator使用git2.1 創建git倉庫 or git項目導入Qt2.2 配置遠端&#xff0c;拉代碼 or 上傳代碼2.3 查看更改2.4 更多細節可參考官方文檔 三、參考的博客以及文檔 引言 Qt Creator配置Git之后&#xff0c;可以看作是…
閱讀更多...
【AIGC】DiffuToon:穩定的視頻卡通化技術方案

【AIGC】DiffuToon:穩定的視頻卡通化技術方案

論文&#xff1a;https://arxiv.org/pdf/2401.16224 github&#xff1a;https://github.com/modelscope/DiffSynth-Studio/tree/main/examples/Diffutoon 網絡結構 兩個主要分支&#xff1a;主要的卡通化管線和編輯分支 重要技術 使用了fastblend(無需模型的視頻幀之間的平滑…
閱讀更多...
動態規劃解決0/1背包問題詳解

動態規劃解決0/1背包問題詳解

一、引言 在日常生活中，我們經常面臨各種選擇和決策。有些決策涉及到資源的有限性和選擇的最優性，這就需要我們運用一些算法來幫助我們做出最佳的選擇。0/1背包問題就是這樣一個經典的優化問題，它要求我們在給定的背包容量和物品集合中，選擇出總價值最大的物品組合。本文將…
閱讀更多...
不同操作系統下的換行符

不同操作系統下的換行符

1. 關鍵字2. 換行符的比較3. ASCII碼4. 修改換行符 4.1. VSCode 5. 參考文檔 1. 關鍵字 CR LF CRLF 換行符 2. 換行符的比較 英文全稱英文縮寫中文含義轉義字符ASCII碼值操作系統Carriage ReturnCR回車\r13MacIntosh&#xff08;早期的Mac&#xff09;LinefeedLF換行/新行\…
閱讀更多...
C++程序演示如何使用類和對象進行簡單的面向對象編程。

C++程序演示如何使用類和對象進行簡單的面向對象編程。

下面是一個簡單的C程序示例&#xff0c;展示了如何使用類和對象進行面向對象編程。這個示例定義了一個名為Person的類&#xff0c;它包含私有成員變量&#xff08;姓名和年齡&#xff09;以及公共成員函數&#xff08;用于設置和獲取這些成員變量的值&#xff09;。然后&#x…
閱讀更多...
【C語言】指針經典例題

【C語言】指針經典例題

題1&#xff1a; #include <stdio.h>int main() {int a[5] { 1, 2, 3, 4, 5 };int* ptr (int*)(&a 1);printf("%d,%d", *(a 1), *(ptr - 1));return 0; } //程序的結果是什么&#xff1f; 解答如下&#xff1a; 題2&#xff1a; #include <std…
閱讀更多...
提取含日期字符串并格式化輸出

提取含日期字符串并格式化輸出

背景 OCR識別的字符串中&#xff0c;日期類型存在字符串中&#xff0c;需要提取出來&#xff0c;并格式化 環境以及依賴package NStudyPy0.0.12 NStudyPy 工具包 , 一個有用的工具包&#xff0c;可以簡化開發流程&#xff0c;詳細介紹可以參考 NStudyPy 本教程使用 python 3.10…
閱讀更多...
Coze終于頂不住了？開始收費了

Coze終于頂不住了？開始收費了

&#x1f914;各位老鐵都知道&#xff0c;之前Coze以免費出圈&#xff0c;香碰碰&#xff0c;字節一個月幾個億補貼用戶。現在終于頂不住了&#xff0c;開始收費了&#xff01; 我們來看看具體情況吧&#xff01; &#x1f4b8;收費情況一覽 目前國內版本還沒有開始收費&#x…
閱讀更多...
VisActor vs ECharts: 哪個更適合你的數據可視化需求？

VisActor vs ECharts: 哪個更適合你的數據可視化需求？

VisActor vs ECharts: 哪個更適合你的數據可視化需求&#xff1f; 在當今數據驅動的世界里&#xff0c;選擇合適的數據可視化工具是至關重要的。ECharts作為廣受歡迎的可視化庫&#xff0c;已經在行業內擁有了長久的歷史和廣泛的用戶基礎。然而&#xff0c;VisActor作為新興的…
閱讀更多...
企業該如何選擇工時管理工具？

企業該如何選擇工時管理工具？

在數字化時代&#xff0c;企業的管理效率直接關系到其市場競爭力。工時管理作為企業管理的重要一環&#xff0c;不僅關乎員工的工作效率&#xff0c;還直接影響到企業的成本控制和決策質量。那么&#xff0c;面對市場上琳瑯滿目的工時管理工具&#xff0c;企業應該如何做出明智…
閱讀更多...
最新文章

Copyright @ 2022~2023