快捷導(dǎo)航

vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問(wèn)題解決方案

更新時(shí)間：2024年01月10日 10:00:02 作者：AzeShinja

這篇文章主要介紹了vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問(wèn)題解決方案,主要解決固定列錯(cuò)位后, 接下來(lái)就是把固定列往上提滾動(dòng)條的高度就不會(huì)影響了,需要的朋友可以參考下

解決方案

我是最右側(cè)固定列，所以下面的class名稱是.el-table__fixed-right, 如果有左側(cè)固定請(qǐng)自行替換為el-table__fixed

防止固定列表格高度錯(cuò)位

  .el-table__fixed-body-wrapper {
    .el-table__body {
      padding-bottom: 15px; // 這個(gè)得自己調(diào)試看多少合適
    }
  }
}

如果還沒(méi)有解決錯(cuò)位，請(qǐng)看你的el-table__body-wrapper是不是自己寫(xiě)了max-height的樣式屬性，這會(huì)影響固定列定位的

解決固定列錯(cuò)位后, 接下來(lái)就是把固定列往上提滾動(dòng)條的高度就不會(huì)影響了

  .el-table__fixed-right {
    height: auto !important;
    bottom: 8px !important;// 這個(gè)得自己調(diào)試看多少合適
  }
   //去掉固定列下方的橫線， 樣式優(yōu)化
  .el-table__fixed::before, .el-table__fixed-right::before {
    display: none;
  }

解決效果如圖：

留出了高度并且高度一致沒(méi)有錯(cuò)位
問(wèn)題完美解決?。?！

到此這篇關(guān)于vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條以及錯(cuò)位的文章就介紹到這了,更多相關(guān)vue2 elementui固定列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼,通過(guò)實(shí)例代碼介紹了父頁(yè)面引用的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
Vue+Echarts繪制餅圖的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制餅圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03
vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn)
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-11-11
解決Vue 移動(dòng)端點(diǎn)擊出現(xiàn)300毫秒延遲的問(wèn)題
這篇文章主要介紹了解決Vue 移動(dòng)端點(diǎn)擊出現(xiàn)300毫秒延遲的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
當(dāng)啟動(dòng)vue項(xiàng)目安裝依賴時(shí)報(bào)錯(cuò)的解決方案
這篇文章主要介紹了當(dāng)啟動(dòng)vue項(xiàng)目安裝依賴時(shí)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue項(xiàng)目設(shè)置多個(gè)靜態(tài)文件及自定義靜態(tài)文件目錄的方案詳解
本文介紹了如何在Vue項(xiàng)目中配置多個(gè)靜態(tài)文件目錄,并提供了使用Vite和Webpack實(shí)現(xiàn)的示例,通過(guò)在vite.config.ts或vue.config.js中引入相關(guān)插件和配置,可以輕松實(shí)現(xiàn)自定義靜態(tài)文件目錄,希望這些內(nèi)容對(duì)您有所幫助,感興趣的朋友一起看看吧
2025-01-01
Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車(chē)功能詳解
這篇文章主要介紹了Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車(chē)功能,結(jié)合實(shí)例形式分析了vue.js前臺(tái)商品分頁(yè)、排序、篩選等功能及后臺(tái)node.js處理技巧,需要的朋友可以參考下
2019-12-12
Vue狀態(tài)管理庫(kù)Pinia詳細(xì)介紹
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具，簡(jiǎn)單來(lái)說(shuō)相當(dāng)于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以參考下
2022-08-08
解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)
這篇文章主要介紹了解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)目上線白屏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)
這篇文章主要為大家介紹了解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10