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
, here is an example.

<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