解決el-table的合計行在橫向滾動條下方的問題的詳解


1、問題:el-table的合計行在橫向滾動條下方

之所以會這樣,是因為此時的橫向滾動條為內容的橫向滾動條(或者說表頭、表內容和表尾三合一)。

2、解決辦法

通過f12可以看到el-table的最外層表頭類名為:.el-table__header-wrapper;最外層表內容的類名:.el-table__body-wrapper;(合計行位於表尾)最外層表尾的類名:.el-table__footer-wrapper。

所以可以通過這三個的樣式進行控制,實際上是只顯示總體table的橫向滾動條,表頭、表內容和表尾都是visible,為了防止全局樣式污染,我在table外加了一個div以及類,

注意:要實現效果,el-table不能是行內元素

.xxxxx-pzcx-kjpz-table >>> .el-table {
  overflow: auto;
}
.xxxxx-pzcx-kjpz-table >>> .el-table__body-wrapper,
.xxxxx-pzcx-kjpz-table >>> .el-table__header-wrapper,
.xxxxx-pzcx-kjpz-table >>> .el-table__footer-wrapper {
  overflow: visible;
}
.xxxxx-pzcx-kjpz-table >>> .el-table::after {
  position: relative !important;
}

這里涉及到css的overflow樣式 ,學習鏈接:https://www.w3school.com.cn/css/pr_pos_overflow.asp

 由於某些原因,我把我的el-table設置成了行內元素,這時候我把橫向滾動條設成el-table外面的那層div的滾動條,效果沒什么區別

.xxxxx-pzcx-kjpz-table{
  overflow: auto;
}
.xxxxx-pzcx-kjpz-table >>> .el-table__body-wrapper,
.xxxxx-pzcx-kjpz-table >>> .el-table__header-wrapper,
.xxxxx-pzcx-kjpz-table >>> .el-table__footer-wrapper {
  overflow: visible;
}
.xxxxx-pzcx-kjpz-table >>> .el-table::after {
  position: relative !important;
}

 


免責聲明!

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



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