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ò)一系列排查和非人類的試探后，總結(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è)列都有寬度），表格不撐滿整個(gè)頁(yè)面。
4.我的實(shí)現(xiàn)方案
1.doLayout +width
2.設(shè)置最小寬度解決不撐滿問(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-cli腳手架初始化Vue項(xiàng)目下的項(xiàng)目結(jié)構(gòu)
這篇文章主要介紹了詳解使用vue-cli腳手架初始化Vue項(xiàng)目下的項(xiàng)目結(jié)構(gòu)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue3中路由傳參query、params及動(dòng)態(tài)路由傳參詳解
vue3中的傳參方式和vue2中一樣,都可以用query和params傳參,下面這篇文章主要給大家介紹了關(guān)于vue3中路由傳參query、params及動(dòng)態(tài)路由傳參的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
這篇文章主要介紹了vue.js模版插值的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了vue.js模板插值的基本功能、原理、實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2023-04-04
Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程，這種導(dǎo)航效果廣泛應(yīng)用于商城點(diǎn)餐購(gòu)物情景，文中通過(guò)示例代碼介紹的很詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-05-05
Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue部署到線上為啥會(huì)出現(xiàn)404的原因分析及解決
這篇文章主要介紹了vue部署到線上為啥會(huì)出現(xiàn)404的原因分析及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開(kāi)箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下2023-12-12
關(guān)于Vue單頁(yè)面骨架屏實(shí)踐記錄
這篇文章主要給大家介紹了關(guān)于Vue單頁(yè)面骨架屏實(shí)踐的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-12-12
Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法
下面小編就為大家分享一篇Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題
這篇文章主要介紹了vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03