el-table无限滚动问题解决方法

1、问题描述

做项目的时候，二次封装了el-table 组件，但是当想让 table 高度随着内容增大而增大时，空数据的时候导致了页面无限增加高度的问题。

2、问题分析

查了往上很多的文章，大部分都是说外层flex导致的，但是我这里并没有用到flex布局这个地方，还有说要加定位来解决的，个人尝试了一下，均没有达到预期的效果。

其实这个问题的解决思路非常简单，因为 el-table__empty-block 这个盒子没有高度，所以页面无法识别，会默认让他高度为最大，而因为你table高度是随着内容撑开而变高的，所以就导致了高度无限增大的情况。

3、解决方案

1、el-table 上 height 和 max-height 均赋值 100%，让高度随内容改变。

<el-table height="100%" max-height="100%"></el-table>
1

2、给 el-table__empty-block 盒子一个默认的高度

.el-table__empty-block {
  height: 525px !important;
}
1
2
3

3、隐藏掉纵向滚动条

.el-table__body-wrapper .is-vertical {
  display: none;
}
1
2
3