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