elementUI table fixed


element中的table表格功能是非常好用的一款功能,但是在實際使用中發現了兩個問題:

1、table開啟fixed功能后底部滾動條被覆蓋:

 

 

 

 

2、table開啟fixed功能后,上下滾動行無法對齊

 

 

 

 

如圖所示:

針對問題1的解決方案有兩個:

1、在公共樣式中設置:

.el-table__fixed{
  height: auto !important; // 讓固定列的高自適應,且設置!important覆蓋ele-ui的默認樣式
}
2、在數據初始化的時候修改el-table__fixed高度:
注意:此處需要使用setTimeout不能使用this.$nextTick,因為需要等el把樣式全部處理完成后才能進行修改,不然會被el覆蓋掉( 具體原因可以參考宏任務與微任務 )
setTimeout(() => {
      $(".el-table__fixed").css({ height: '當前table高度' - '滾動條高度' });
 });
 
針對問題2的解決方案也有兩個:
1、修改源碼,這個不用說,可以直接修改elementUI的源碼進行處理
2、使用一個基於elementUI的table插件進行樣式方面的處理,我這塊使用的是 ElBigdataTable 這款插件進行處理的,這款插件基於elementUI進行的二次開發,使其table兼容大數據,引用進來后只需要把el-table改為ElBigdataTable就可以了,因為是基於element的二次開發所以對table的功能都是兼容的


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM