Element中table組件(el-table)右側(cè)滾動條空白占位處理
錯誤展示
如下圖：
element的table組件有一個max-height參數(shù)可以設(shè)置表格組件的最大高度。
如果數(shù)據(jù)過多，在最大高度內(nèi)展示不開，就會自動加一個滾動條，進(jìn)行滾動展示。
如果數(shù)據(jù)很少，沒有達(dá)到最大高度，那么右側(cè)不應(yīng)該有滾動條，和一切干擾列。
但是當(dāng)我設(shè)置了max-height ，且我這個地方?jīng)]有達(dá)到最大高度，就會在表格右側(cè)出現(xiàn)一列空白的占位，這樣比較丑。怎么去掉這一列空白呢？
解決方法
方法1：
不設(shè)置max-height參數(shù)。
如果你的數(shù)據(jù)有限（分頁展示），不考慮過多的列會無限往下?lián)胃叨?。那么可以采用這種方法來解決。
方法2：
手動通過css來隱藏掉這一列。
/deep/ .el-table th.gutter{
display: none;
width:0
}
/deep/ .el-table colgroup col[name='gutter']{
display: none;
width: 0;
}
/deep/ .el-table__body{
width: 100% !important;
}這樣修改完，超過最大高度的情況，會出現(xiàn)滾動條。不超過最大高度的情況，也不會有空白占位列。
成果展示
展示如下：
我這邊對表格有一個拖拽功能。通過拖拽來控制表格的最大高度。
當(dāng)拖拽的最大高度小于數(shù)據(jù)高度時，有滾動條。
當(dāng)拖拽高度大于數(shù)據(jù)高度時，可以看到?jīng)]有滾動條，也沒有空白占位列。
到此這篇關(guān)于Element中table組件(el-table)右側(cè)滾動條空白占位處理的文章就介紹到這了,更多相關(guān)el-table右側(cè)滾動條空白占位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
本篇文章主要介紹了vue多種彈框的彈出形式的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
webpack4+Vue搭建自己的Vue-cli項目過程分享
這篇文章主要介紹了webpack4+Vue搭建自己的Vue-cli，對于vue-cli的強(qiáng)大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻,感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
滑塊驗證是比較常見的人機(jī)鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗證，具有一定的參考價值，感興趣的可以了解一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實現(xiàn)數(shù)字縱向滾動效果,從而達(dá)到顯示計時器滾動效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue實現(xiàn)水波漣漪效果的點(diǎn)擊反饋指令
鼠標(biāo)移入時的小手、鼠標(biāo)點(diǎn)擊時按鈕下壓彈起的動畫、觸屏應(yīng)用點(diǎn)擊時的屏幕震動，這些效果也被統(tǒng)稱為點(diǎn)擊反饋，雖然看似是應(yīng)用中的細(xì)枝末節(jié)，但是只要稍微投入一點(diǎn)點(diǎn)心思，帶來的用戶體驗提升是十分明顯的,這里作者為小伙伴們推薦一種作者最喜歡的點(diǎn)擊反饋效果。2021-05-05
這篇文章主要介紹了Vue如何調(diào)用接口請求頭增加參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue中computed和watch的綜合運(yùn)用實例,主要需求是點(diǎn)擊按鈕實現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue購物車插件的編寫代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11