快捷導(dǎo)航

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

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

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

解決方案

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

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

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

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

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

  .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;
  }

解決效果如圖：

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

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

您可能感興趣的文章:

相關(guān)文章

vue.js實(shí)現(xiàn)的幻燈片功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的幻燈片功能,結(jié)合實(shí)例形式分析了vue.js實(shí)現(xiàn)幻燈片的相關(guān)樣式、配置、功能等操作技巧,需要的朋友可以參考下
2019-01-01
vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能,本文通過具體實(shí)現(xiàn)代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2021-09-09
概述VUE2.0不可忽視的很多變化
本文給大家分析下vue2.0幾個(gè)重要的與自己目前項(xiàng)目相關(guān)的變化，也是vue2.0不可忽視的變化，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-09-09
Vue項(xiàng)目中引入外部文件的方法（css、js、less）
本篇文章主要介紹了Vue項(xiàng)目中引入外部文件的方法（css、js、less），非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-07-07
Webpack打包圖片-js-vue 案例解析
在開發(fā)中我們會有各種各樣的模塊依賴,這些模塊可能來自于自己編寫的代碼,也可能來自第三方庫,本文給大家介紹Webpack打包圖片-js-vue的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧
2023-11-11
Vue+Element使用富文本編輯器的示例代碼
本篇文章主要介紹了Vue+Element使用富文本編輯器的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08
Vue前端路由hash與history差異深入了解
這篇文章主要為大家介紹了Vue前端路由hash與history差異的深入了解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
vue使用keep-alive保持滾動條位置的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動條位置的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue 使用v-if切換輸入框時(shí)導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決(兩種解決方法)
這篇文章主要介紹了vue 使用v-if切換輸入框時(shí)導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒有清空的問題解決，本文給大家分享兩種解決方法,需要的朋友可以參考下
2023-05-05
Vue3實(shí)現(xiàn)LuckSheet在線預(yù)覽Excel表格
在前端開發(fā)中預(yù)覽Excel文件是常見的需求之一,本文將介紹如何使用Vue.js框架以及兩個(gè)優(yōu)秀的Excel庫——LuckyExcel和Luckysheet,來實(shí)現(xiàn)Excel文件在線預(yù)覽功能,希望對大家有所幫助
2023-11-11