解决element table 宽高自适应

以下是布局：

<div class="container">
    <div class="table" >
        <el-table height="100%" :data="tableData" style="width: 100%" > </el-table>
    </div>
    <div class="pagination"></div>
</div>

首先，container是需要有高度的一个容器，具体怎么设置需要结合布局实际需求，大多数情况可以使用flex:1去设置。

同样的，给container设置display:flex，.table设置flex:1，使其可以撑开除了pagination以外的区域。

这里值得强调的是，flex布局，当你设置flex:1去撑开剩余空间时：当子元素宽或者高大于项目宽或者高时，项目会被撑开，因此，需要给table设置position:relative，给el-table设置position:absolute，使其脱离文档流而不会因为el-table里面的数据太多而撑开整个table父容器。

然后再给table设置height="100%”，这里要注意的是，在el-table标签上设置属性height="100%”时，同时给

.el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: auto;
}

设置了高度，这是element自定义的滚动条。

而如果给style="width: 100%;height:100%”设置高度，那么就需要给el-table加上overflow:hidden;这时的滚动条就是系统默认的滚动条。

最后，附上css代码：

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    .table {
        flex: 1;
        position: relative;
        /deep/.el-table {
            position: absolute;
        }
    }
}

以上就是全部内容了，你会发现你的表格宽高都自适应了，不用感谢我，解决了你的问题就点个赞吧！ 0_0