preface
When doing PC terminal management system, always can not open reports. When the report form page has a lot of data, the scroll bar appears. At this point, the product can’t look at it anymore, saying that the current page page button has to be displayed by mouse scrolling. How to deal with this problem? There are some solutions on the web that use the resize event to calculate the height and assign the value.
The phenomenon of
This is the current layout, scroll to the bottom to seeel-pagination
.
Demo
The layout is as follows, app-main is usually our
<template>
<div class="table">
<div class="wrapper">
<div class="sidebar">
<span>The left side menu</span>
</div>
<div class="main-contanier">
<div class="fixed-header">Fixed to the head</div>
<section class="app-main">
<div class="main-1">
<! -- Query condition -->
</div>
<div class="main-2">
<! - table table - >
</div>
<div class="main-3">
<! - page - >
</div>
</section>
</div>
</div>
</div>
</template>
Copy the code
So now we’re going to do the layout in app-Main.
Train of thought
First, set the height of app-main to calc(100%-84px), then use Flex to arrange the filter main-1 and page main-1 at the top and bottom, respectively, with the table main-2 in the middle adaptive. Main-2 is the parent element of the el-table, the parent element is Flex, and the child element height is set to 100%. . If the height is passed to the el-table, it should not be allowed to scroll with the header.
As long as the height attribute is defined in the EL-Table element, you can implement a table with fixed table heads without additional code.
The main code
Vue
<template>
<div class="table">
<div class="wrapper">
<div class="sidebar">
<span>The left side menu</span>
</div>
<div class="main-contanier">
<div class="fixed-header">Fixed to the head</div>
<section class="app-main">
<div class="main-1">
<span>The name</span>
<span><el-input></el-input></span>
<span><el-button>The query</el-button></span>
</div>
<div class="main-2">
<el-table
height="0"/ / important points1
:data="tableData2"
style="width: 100%">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
<div class="main-3">
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</section>
</div>
</div>
</div>
</template>
Copy the code
css
/deep/ .el-table{
height: 100% !important; // Important point 2
}
.app-main{
padding-top: 84px;
height: calc(100% - 84px);
width: 100%;
position: relative;
overflow: hidden;
background: #cedbf1;
display: flex;
flex-direction: column;
justify-content: space-between;
.main-2{
flex: auto ;
overflow: hidden;// Important point 3 Set overflex: hidden on the Flex element to calculate inside the element
}
}
.main-1,.main-3{
display: flex;
padding: 20px;
background: white;
}
.main-1{
margin-bottom: 12px;
}
.main-3{
margin-top: 12px;
}
Copy the code
conclusion
Through simple CSS, Thanks all (· ω ·) Blue