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