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的功能都是兼容的
