How does el-Table fix the header while the table content is highly adaptive and realize real-time adaptive by listening to the page redraw?

1. The fixed header of el-table is added with the hight attribute, which is dynamically obtained and evaluated

<div class="table-container" ref="container">
  <el-table :data="tableData" :height="tableHeight" >
    <el-table-column v-for="item in tableHeadData" :key="item.prop" :prop="item.prop" :label="item.label"> 
    </el-table-column>
  </el-table>
</div>
Copy the code

.table-container {
  box-sizing: border-box;
  height: calc(100vh - 350px); // My current project cannot exceed one screen, so this sentence is not necessarymargin: 24px 0 40px; // Set the table margin}Copy the code

2. Use * * Element in getBoundingClientRect () * * to get the height of the adaptive area, height is set to the form, it can achieve the result of adaptive height fixed header.

3. When resize the browser window, recalculate the height by listening for the resize event

export default {
  data () {
    return {
      tableHeight: 0.tableData: []}},methods: {
    calcHeight () { // Dynamically calculate the table height
      this.$nextTick(() = > {
      	if(this.$refs.container) return // Prevent getBoundingClientRect from being called because the Container element is not available
        this.tableHeight = this.$refs.container.getBoundingClientRect().height
      })
    },
    onResize () {// Anti-shake processing
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() = > {
            this.calcHeight()
        }, 500) 
    }
  },
  mounted () {
    this.calcHeight()
    window.addEventListener('resize'.this.onResize)// Listen for page redraw events
  },
  beforeDestroy () { // Remove the redraw event listener when jumping to the page
      this.timer && clearTimeout(this.timer)      
      window.removeEventListener('resize'.this.onResize)
  },
} 
Copy the code