el-table 动态响应屏幕尺寸实现表头固定

Question

# 问题描述

需要在 ElementUI 中, 使得 el-table 实现表头固定且动态响应屏幕尺寸 ;

即不同的屏幕尺寸下, 同样实现表头固定, 且样式正常统一

# 问题出现的环境背景及自己尝试过哪些方法

尝试过计算tableHeight :

  mounted() {
    //window.innerHeight:浏览器的可用高度
    //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
    //后面的50：根据需求空出的高度，自行调整
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 100;
  },

虽然最终得到了计算结果, 但是el-table 并没有响应变化

Answer 1

this.$nextTick(function() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 100;
    // 监听窗口大小变化
    let self = this;
    window.onresize = function() {
      self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 100
     }

})