Here’s the layout:

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

First of all, a container needs to be a container with a height. The specific setting needs to be combined with the actual layout requirements. In most cases, you can use Flex :1 to set the container.

Similarly, set container to display:flex and.table to flex:1 so that it can stretch all areas except pagination.

It’s worth emphasizing here that the Flex layout, when you set Flex :1 to stretch out the remaining space: If the child element is larger than the item width or height, the item will be pushed apart. Therefore, set position:relative to table, position: Absolute to el-table, and position:absolute to el-table. Take it out of the document stream without overloading the entire table parent container with data in el-Table.

Then set height=”100% “for the table. Note that when setting height=”100%” on the el-table tag, it also gives

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

Set the height, which is element’s custom scrollbar.

Style =”width: 100%; To set height:100%, add overflow:hidden to el-table; The scrollbar is the default scrollbar.

Finally, attach the CSS code:

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

That’s all, you’ll find that the width and height of your table are all self-adaptive, don’t thank me, just click “like” when you solve your problem! 0 _0