el-table表格组件高度自适应通用方式_组件自适应

关于表格自适应有很多方案，一般逻辑都是获取窗口高度减去其他元素来实现。

尝试了很多，不管是普通场景，还是上下元素高度动态改变情况，都能兼容。

原理就是窗口高度 - 表格距离顶部距离 - 需求高度 = tableHeight

mounted() {
 
    let that = this;
 
    this.$nextTick(() => {
 
      this.tableHeight =
 
        window.innerHeight - this.$refs.table_e.$el.offsetTop - 200;  //窗口高度 - 表格距离顶部距离 - 需求高度
 
      this.$refs.table_e.doLayout(); //更新表格 防止表格内容变化表格异常情况
 
      // 监听窗口大小变化
 
      window.onresize = function () {
 
        that.tableHeight =
 
          window.innerHeight - that.$refs.table_e.$el.offsetTop - 200;
 
        that.$refs.table_e.doLayout();
 
      };
 
    });
 
  },

此处稍微说明一下，this.$refs.table_e获取的是DOM元素，有offsetTop方法

但是this.$refs.table_e如果获取的是组件，不是DOM元素，加上$el方法可获取其内部的DOM元素。