background

The project uses the Element-UI component library, of which table is used heavily. In use, I found that height must be passed in to make the table adaptive and the header fixed. Since the height of the table is not a fixed value, it varies with the size of the screen, which causes a problem: each time you add a table, you must write the following:

  1. Js calculates the height of the table
  2. Listen for the resize event of the window and perform step 1 after each resize
  3. Page destruction also removes event listeners to prevent memory leaks

Specific implementation can refer to you dig friends implementation: Element Table adaptive height solution. The article goes into great detail. But as the tables became more numerous, the code seemed less maintainable, and I came up with the idea of using pure CSS to make the Element Table height adaptive.

To explore the implementation

My idea is to set the parent container to flex layout and then the Flex of el-Table to 1. Make the EL-table open automatically. Flex: 1 is set to 1 in the el-table source code.

<div id="app">
 <el-table
  border
  class="table-test"
  :data="tableData"
>
  <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>

Copy the code
#app {
  height: 90vh;
  border: 1px solid;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
Copy the code
var Main = {
    data() {
      return {
        tableData: [{
          date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
        }, {
          date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai
        }, {
          date: '2016-05-01'.name: 'Wang Xiaohu'.address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai
        }, {
          date: '2016-05-03'.name: 'Wang Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai}}}}]var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
Copy the code

If we look at the element, we can see that the table occupies the entire height of the parent container, but the nodes in the table are out of the container, and there is no scrollbar. The following two pictures:

Table occupies the full container height (parent containerborder: 1px solid) :

The contents of the body in the table are outside the table and the scroll bar does not appear:

To solve this problem, in the readingelement-uiAfter the source code, I found,heightProperty will be used for height calculations and will affect the figure aboveel-table__body-wrapper

So I pass height=”100%” into the EL-Table for height calculation in the EL-Table component library. Sure enough, we can achieve table fixed table head adaptive. Try adding something else to the same parent container and still keep the table adaptive. Just these two:

  1. The parent containerdisplay: flex
  2. El – table Settingsheight=100%

The full HTML code for the image above is as follows:

<div id="app">
<div><el-button>Test 2</el-button></div>
 <el-table
  border
  class="table-test"
  :data="tableData"
  height="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>
<el-pagination></el-pagination>
</div>
Copy the code

The complete code

For specific code, see codepen here. You can adjust the screen height to feel the adaptive height of the table.

conclusion

By setting the adaptive height of the Table through CSS, a large number of codes that are not easy to maintain and calculate the height of JS are completely removed, making the code more elegant and convenient for subsequent rapid iteration.