vue2+elementui的el-table固定列會遮住橫向滾動條及錯位問題解決方案
更新時間：2024年01月10日 10:00:02 作者：AzeShinja
這篇文章主要介紹了vue2+elementui的el-table固定列會遮住橫向滾動條及錯位問題解決方案,主要解決固定列錯位后, 接下來就是把固定列往上提滾動條的高度就不會影響了,需要的朋友可以參考下
解決方案
我是最右側(cè)固定列，所以下面的class名稱是.el-table__fixed-right, 如果有左側(cè)固定請自行替換為el-table__fixed
防止固定列表格高度錯位
.el-table__fixed-body-wrapper {
.el-table__body {
padding-bottom: 15px; // 這個得自己調(diào)試看多少合適
}
}
}如果還沒有解決錯位， 請看你的
el-table__body-wrapper是不是自己寫了max-height的樣式屬性， 這會影響固定列定位的
解決固定列錯位后, 接下來就是把固定列往上提滾動條的高度就不會影響了
.el-table__fixed-right {
height: auto !important;
bottom: 8px !important;// 這個得自己調(diào)試看多少合適
}
//去掉固定列下方的橫線， 樣式優(yōu)化
.el-table__fixed::before, .el-table__fixed-right::before {
display: none;
}解決效果如圖：
留出了高度并且高度一致沒有錯位
問題完美解決?。?！
到此這篇關(guān)于vue2+elementui的el-table固定列會遮住橫向滾動條以及錯位的文章就介紹到這了,更多相關(guān)vue2 elementui固定列內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了VUE PC端可拖動懸浮按鈕的實現(xiàn)代碼,通過實例代碼介紹了父頁面引用的方法,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實現(xiàn)繪制餅圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了解決Vue 移動端點擊出現(xiàn)300毫秒延遲的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了當(dāng)啟動vue項目安裝依賴時報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue項目設(shè)置多個靜態(tài)文件及自定義靜態(tài)文件目錄的方案詳解
本文介紹了如何在Vue項目中配置多個靜態(tài)文件目錄,并提供了使用Vite和Webpack實現(xiàn)的示例,通過在vite.config.ts或vue.config.js中引入相關(guān)插件和配置,可以輕松實現(xiàn)自定義靜態(tài)文件目錄,希望這些內(nèi)容對您有所幫助,感興趣的朋友一起看看吧2025-01-01
Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能詳解
這篇文章主要介紹了Vue+Node實現(xiàn)商品列表的分頁、排序、篩選，添加購物車功能,結(jié)合實例形式分析了vue.js前臺商品分頁、排序、篩選等功能及后臺node.js處理技巧,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具，簡單來說相當(dāng)于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以參考下2022-08-08
解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項
這篇文章主要介紹了解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項目上線白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
解決vue?app.js/vender.js過大優(yōu)化啟動頁
這篇文章主要為大家介紹了解決vue?app.js/vender.js過大優(yōu)化啟動頁過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10