element-ui 表格底部留白/el-table__body-wrapper is-scrolling-none 高度错误

问题描述

el-table__body-wrapper is-scrolling-none 的高度在没有完全展开的时候会造成表格体溢出，表格显示不完全，底部留白。

解决方法

方法一

这是网上搜罗到的方法，但对我没用，还是放出来给大家做个参考
动态计算table的高度。

① 样式修改法一

.assets-table  /deep/.el-table__body-wrapper {
    height: calc(100% - 40px) !important;
  }

assets-table 就是el-table 上面的class属性样式。

②样式修改法二

比上一种方法多了一个overflow

<style scoped>
.tableFormR /deep/ .el-table__body-wrapper {
  overflow-y: auto;
  height: calc(100% - 44px) !important;
}
</style>

tableFormR 就是el-table 上面的class属性样式。

方法二（暴力版）

在表格外嵌套一个div并设置div的高度即可 这个就比较白痴 但有效

 <div style="height: 267px">
            <el-table
                    :data="sortDebit"
                    style="width: 100%;"
                    border
                    stripe
                    max-height="267"
                    class="common"
            >
            ...
             </el-table>
        </div>