整体满屏，表格高度auto

1.页面

ref="changeBox" :style="{ 'height': containerHeight + 'px' }"
ref="table"  :height="tableHeight" :max-height="tableHeight" 
ref="pageBox"

<template>
  <div class="orderInfo" ref="changeBox" :style="{ 'height': containerHeight + 'px' }">
    <el-table :data="tableData" border id="outExcel" ref="table" v-loading="tableLoading" row-key="id" stripe
      :height="tableHeight" :max-height="tableHeight" size="medium" style="width:100%;"> 
    </el-table>
    <div class="pageInfo" ref="pageBox">
    </div>
  </div>
</template>
data() {
    return {
      containerHeight: 800,
      tableHeight: 500,
    }
  },
  created() {
    this.$nextTick(function () {
      this.onResize();
    });
    window.addEventListener('resize', this.onResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
   onResize() {
      this.$method.onResize(this.$refs.changeBox, this.$refs.pageBox);
      this.containerHeight = this.$method.containerHeight;
      this.tableHeight = this.$method.tableHeight;
    },
    }

2.js

export default {
  containerHeight:500,
  tableHeight:500,
  // 根据滚动条高显示的大小发生变化
  onResize(outerBox,innerBox) {
    var boxHeight = document.documentElement.clientHeight || document.body.clientHeight;
    var mapTop = outerBox.getBoundingClientRect().top;
    var pageHeight = innerBox.getBoundingClientRect().height;
    this.containerHeight = boxHeight - mapTop - 40;
    this.tableHeight = this.containerHeight - pageHeight;
  },
  
}

3.main.js

import method from "@/util/public";
Vue.prototype.$method = method;