el-table?fixed固定列導致錯位的解決方法介紹
Element UI table組件可以通過設置fixed屬性實現(xiàn)列的固定,但是在某些情況下會導致固定列的樣式錯亂,下面就總結(jié)下解決樣式錯亂實現(xiàn)方案

1.doLayout(官方提供)
對 Table 進行重新布局。當 Table 或其祖先元素由隱藏切換為顯示時,可能需要調(diào)用此方法。


2.<el-table>標簽上加一個class="table-fixed"
這個通過設置優(yōu)先級覆蓋內(nèi)聯(lián)樣式

3.el-table-column增加width
這個是網(wǎng)上一個大神經(jīng)過一系列排查和非人類的試探后,總結(jié)出來。
操作一列中,fixed=“right”,需要指定寬度 width
與操作列相鄰的一列不加width,其他的列指定寬度

我在項目上測試確實是這個問題。但是我的項目是動態(tài)表頭的,沒辦法確定fixed列的相鄰列。因此我用了一種取巧的方案,就是用doLayout方案,可以解決橫向滾動的不對齊的問題,但是還有個問題就是如果列比較少(每個列都有寬度),表格不撐滿整個頁面。
4.我的實現(xiàn)方案
1.doLayout +width
2.設置最小寬度解決不撐滿問題

最終解決問題。
總結(jié)
到此這篇關于el-table fixed固定列導致錯位的解決方法的文章就介紹到這了,更多相關el-table fixed固定列導致錯位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue中通過Vue.extend動態(tài)創(chuàng)建實例的方法
這篇文章主要介紹了Vue中通過Vue.extend動態(tài)創(chuàng)建實例的方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue結(jié)合Element-Plus封裝遞歸組件實現(xiàn)目錄示例
本文主要介紹了Vue結(jié)合Element-Plus封裝遞歸組件實現(xiàn)目錄示例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04
Vue中使用event的坑及解決event is not defined
這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實現(xiàn)將圖像文件轉(zhuǎn)換為base64
這篇文章主要介紹了vue實現(xiàn)將圖像文件轉(zhuǎn)換為base64,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-02-02
vue前端框架vueuse的useScroll函數(shù)使用源碼分析
這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08
有關vue 開發(fā)釘釘 H5 微應用 dd.ready() 不執(zhí)行問題及快速解決方案
這篇文章主要介紹了有關vue 開發(fā)的釘釘 H5 微應用 dd.ready() 不執(zhí)行問題及快速解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色
這篇文章主要介紹了vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10

