Ant Design Vue的table组件在有数据和没有数据的时候出现的样式冲突问题

初入职场，之前写项目的时候，用的antd的table组件，并没有过多的去关注它的样式问题。这次做的这个项目的时候，我们公司另一个前端和我说，你的分页器部分要给我固定位置，不要让它跟着数据动，让他定在底部别动，而且表格的高度也不要动来动去的，让它占满下面的空白部分。一开始，我是在元素里去检索对应的table的类名，然后在_antd.scss中去覆盖antd原有的样式

.ant-table-body {
  min-height: 8.5rem !important;
}

这样是解决了表格固定的问题，自然而然分页器也就被挤在底部了。

但是过了段时间，当我将测试数据删除时，我发现样式出现了问题：

我的暂无数据为什么被挤下去了？？

经过我细心的排查，我才发现antd里面有一个问题，那就是，这个暂无数据展示的table和有数据时展示的数据并不是同一个容器！！官方为什么没有想到做一下优化？？？

最后我苦思冥想，终于找出了应对它的方法：

由于暂无数据这个table容器在没有数据的时候，会自动隐藏，而展示数据的框在没有数据的时候有是没有数据的（好像废话(🤡🤡🤡），因此我对它做了一个定位，把蓝色的和红色的重叠起来了

.ant-table-body {
  border: 5px solid red;
  min-height: 8.5rem !important;
  // display: none;
}
.ant-table-scroll {
  position: relative !important;

  .ant-table-placeholder {
    border: 5px solid blue;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    top: 55px;
    min-height: 8.5rem !important;
  }
}

OK，问题完美解决了，

汗流浃背了吧老弟😎😎😎，是不是根本看不出来！！

那么这个问题就被我偷鸡偷下来了，希望antd官方优化一下这个表格的问题，加个API可以手动设置。

以上