el-table 表格最大高度max-height的问题解决

function useMaxWidth() {
    const tableRef = ref();
    const maxHeight = ref(0);

    onMounted(() => {
      window.addEventListener("resize", resize);
    });

    onUnmounted(() => {
      window.removeEventListener("resize", resize);
    });

    function resize() {
      maxHeight.value = 0;
      nextTick(() => {
        maxHeight.value = tableRef.value.offsetHeight;
      });
    }
    return { maxHeight, tableRef, resize };
  }

const App = {
    setup() {
      let tableData = ref([]);
      onBeforeMount(async () => {
        tableData.value = await new Promise((resolve) => {
          setTimeout(() => {
            const data = new Array(100).fill({
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
            });
            resolve(data);
          }, 2000);
        });
      });

      const { maxHeight, tableRef, resize } = useMaxWidth();

      resize();

      return {
        tableData,
        tableRef,
        maxHeight,
      };
    },
  };
  const app = createApp(App);
  app.use(ElementPlus);
  app.mount("#app");

<main class="HolyGrail-content" ref="tableRef">
      <el-table :data="tableData" :max-height="maxHeight">
        <el-table-column prop="date" label="日期" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址" :formatter="formatter">
        </el-table-column>
      </el-table>
    </main>

.HolyGrail-content {
 flex: 1;
}

<template>
 <div class="table-container" ref="table">
  <slot :maxHeight="maxHeight"></slot>
 </div>
</template>
<script>
 export default {
   name:'',
   data () {
     return {
      maxHeight: 0
     }
   },
   mounted() {
    window.addEventListener('resize', this.resize);
   },
   beforeDestroy() {
    window.removeEventListener('resize', this.resize)
   },
   methods:{
    resize() {
      this.maxHeight = 0;
      this.$nextTick(() => {
        this.maxHeight = this.$refs.table.offsetHeight;
      })
    }
   },
 }
</script>
<style scoped>
  .table-container {
    height: 100%;
  } 
</style>

<table-container ref="tableContainer" v-slot="slotProps">
      <el-table :data="tableList" :max-height="slotProps.maxHeight" >
      </el-table>
  </table-container>

this.$refs.tableContainer.resize();

if(this.listQuery.page === 1) this.$refs.tableContainer.resize();