el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法介紹
Element UI table組件可以通過(guò)設(shè)置fixed屬性實(shí)現(xiàn)列的固定，但是在某些情況下會(huì)導(dǎo)致固定列的樣式錯(cuò)亂，下面就總結(jié)下解決樣式錯(cuò)亂實(shí)現(xiàn)方案
1.doLayout（官方提供）
對(duì) Table 進(jìn)行重新布局。當(dāng) Table 或其祖先元素由隱藏切換為顯示時(shí)，可能需要調(diào)用此方法。
2.<el-table>標(biāo)簽上加一個(gè)class="table-fixed"
這個(gè)通過(guò)設(shè)置優(yōu)先級(jí)覆蓋內(nèi)聯(lián)樣式
3.el-table-column增加width
這個(gè)是網(wǎng)上一個(gè)大神經(jīng)過(guò)一系列排查和非人類(lèi)的試探后，總結(jié)出來(lái)。
操作一列中，fixed=“right”,需要指定寬度 width
與操作列相鄰的一列不加width，其他的列指定寬度
我在項(xiàng)目上測(cè)試確實(shí)是這個(gè)問(wèn)題。但是我的項(xiàng)目是動(dòng)態(tài)表頭的，沒(méi)辦法確定fixed列的相鄰列。因此我用了一種取巧的方案，就是用doLayout方案，可以解決橫向滾動(dòng)的不對(duì)齊的問(wèn)題，但是還有個(gè)問(wèn)題就是如果列比較少（每個(gè)列都有寬度），表格不撐滿(mǎn)整個(gè)頁(yè)面。
4.我的實(shí)現(xiàn)方案
1.doLayout +width
2.設(shè)置最小寬度解決不撐滿(mǎn)問(wèn)題
最終解決問(wèn)題。
總結(jié)
到此這篇關(guān)于el-table fixed固定列導(dǎo)致錯(cuò)位的解決方法的文章就介紹到這了,更多相關(guān)el-table fixed固定列導(dǎo)致錯(cuò)位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中通過(guò)Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例的方法
這篇文章主要介紹了Vue中通過(guò)Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue結(jié)合Element-Plus封裝遞歸組件實(shí)現(xiàn)目錄示例
本文主要介紹了Vue結(jié)合Element-Plus封裝遞歸組件實(shí)現(xiàn)目錄示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue中使用event的坑及解決event is not defined
這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue動(dòng)態(tài)類(lèi)的幾種使用方法總結(jié)
這篇文章主要介紹了Vue動(dòng)態(tài)類(lèi)的幾種使用方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64
這篇文章主要介紹了vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02
vue前端框架vueuse的useScroll函數(shù)使用源碼分析
這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
有關(guān)vue 開(kāi)發(fā)釘釘 H5 微應(yīng)用 dd.ready() 不執(zhí)行問(wèn)題及快速解決方案
這篇文章主要介紹了有關(guān)vue 開(kāi)發(fā)的釘釘 H5 微應(yīng)用 dd.ready() 不執(zhí)行問(wèn)題及快速解決方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
vue循環(huán)el-button實(shí)現(xiàn)點(diǎn)擊哪個(gè)按鈕,那個(gè)按鈕就變色
這篇文章主要介紹了vue循環(huán)el-button實(shí)現(xiàn)點(diǎn)擊哪個(gè)按鈕,那個(gè)按鈕就變色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄
這篇文章主要介紹了vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄,文中是小編記錄的三個(gè)坑及解決方案，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue快捷鍵與基礎(chǔ)指令詳解,需要的朋友可以參考下2017-06-06