el-table setting height adaptive, dynamic setting height

premise:

When encountering different screen sizes of different browsers, I want the el-table to have an adaptive height. It can be achieved in just three steps.

---

1. First, dynamically bind a height in el-table  : height="tableHeight",  and declare tableHeight in data. 

 <el-table
      ref="multipleTable"
      :data="tablist"
      style="width: 100%"
      v-if="tableHeight"
      :height="tableHeight"
    >
</el-table>

 

data(){
	return {
		tableHeight: "",//表格高度
	}
}

2. Declare a method to calculate the height of el-table

 methods: {
   //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 210; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
  }

3. Call this method in created and mount the window.onresize event to mounted

  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  
  created() {
    this.getTableHeight();
  },

4. Finally save, you can modify  tableH = 210;  to modify the height from the bottom of the page to view the effect.