react antd table固定高度

antd 的 table 高度是根据数据条数来渲染撑高的，如果碰到数据很少，table 的边框和分页组件会升高，非常难看。

多次试验之后，解决方案为通过外层包裹一层div，然后层层设置样式高度的方式来解决高度问题，并根据不同类名来区分是否需要预留分页组件的高度

  //page-table为外层div类名
 .page-table{ 
    .ant-table-wrapper {
      height: 100%;
      .ant-spin-nested-loading {
        height: 100%;
        .ant-spin-container {
          height: 100%;
          //ant-table为整个数据表单的盒子，不包括分页，所以-56是去掉了分页组件的高度
          .ant-table {
            height: calc(100% - 56px) !important;
            .ant-table-container {
              height: 100%;
              //ant-table-body为数据区的盒子，-44px是减掉表头的高度
              .ant-table-body {
                height: calc(100% - 39px) !important;
              }
               //ant-table-placeholder为数据为空时的盒子，-44px是减掉表头的高度
              .ant-table-placeholder{
                height: calc(100% - 39px) !important;
                //ant-table-cell为空数据文字展示盒子，设置高度为100%，并使用flex布局重新居中文字
                .ant-table-cell{
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
  }

下面是没有分页组件的table的样式，绝大部分内容相同，只是ant-table这个样式少减了一个分页的高度

//noPage-table为外层div类名
.noPage-table{
    .ant-table-wrapper {
      height: 100%;
      .ant-spin-nested-loading {
        height: 100%;
        .ant-spin-container {
          height: 100%;
          .ant-table {
            height: 100%;
            .ant-table-container {
              height: 100%;
              .ant-table-body {
                height: calc(100% - 39px) !important;
              }
              .ant-table-placeholder{
                height: calc(100% - 39px) !important;
                .ant-table-cell{
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
  }