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

解决el-table的合计行在横向滚动条下方的问题的详解

推荐阅读