1、前提

了解自定義指令、hooks

2、核心思路

通過自定義指令（new ResizeObserver）監聽表格變化，然后通過hooks去更新表格高度。

3、核心代碼

src/directives/resize.ts

// import { debounce } from '@/utils';import { type Directive } from "vue";const resizeDirective: Directive = {mounted(el, binding) {// update 要高效，否則會導致 ResizeObserver loop completed with undelivered notifications.// 這里通過 setTimeout 延遲實際更新到下個 ticklet update = (entry: ResizeObserverEntry) => {setTimeout(() => {binding.value(entry);}, 0);};if (binding.arg) {try {let delay = Number.parseInt(binding.arg);console.log(delay);// update = debounce(binding.value, delay);} catch (error) {console.log(error);}}// 創建 ResizeObserver 實例const resizeObserver = (el.__resizeObserver__ = new ResizeObserver((entries) => {// 當目標元素的大小發生變化時，執行回調函數update(entries[0]);}));// 開始監聽目標元素的大小變化resizeObserver.observe(el);},unmounted(el) {el.__resizeObserver__.disconnect();},
};export default resizeDirective;

src/hooks/useTableConfig.ts

import { type TableInstance } from "element-plus";/** 獲取表格的基本配置 */
export const useTableConfig = <T>(padding: number = 20) => {const tableLoading = ref<boolean>(false);const pageData = ref<T[]>([]);const total = ref<number>(0);const tableRef = ref<TableInstance | null>(null);const selectedTableIds = ref<string[]>([]);/**表格高度 */const tableFluidHeight = ref<number>(0);const tableResize = (rect: DOMRectReadOnly) => {tableFluidHeight.value = rect.height - padding * 2;};return {tableLoading,pageData,total,tableRef,selectedTableIds,tableFluidHeight,tableResize,};
};

這里padding：20的原因是

?src/components/BaseTableSearchContainer/index.vue

<template><div class="flex flex-col h-full"><slot name="search" /><div ref="centerRef" v-resize="onResize" class="flex-1 overflow-auto"><div :class="centerClass" class="p-20px bg-light-50"><slot name="table" /></div></div><div style="background: white"><slot name="pagination" /></div></div>
</template><script setup lang="ts">
import { useTemplateRef } from "vue";
defineProps({ centerClass: { type: String, default: "" } });
const emit = defineEmits(["sizeChanged"]);const centerRef = useTemplateRef<HTMLElement>("centerRef");
const onResize = (e: ResizeObserverEntry) => {// console.log("resize", e, centerRef.value, centerRef.value?.getBoundingClientRect().height);emit("sizeChanged", e.contentRect);
};
</script><style lang="scss" scoped></style>

使用：

<template><div class="app-container"><BaseTableSearchContainer @size-changed="tableResize"><template #search><TBSearchContainer :is-show-toggle="true"><template #left> </template><template #right> </template></TBSearchContainer></template><template #table><el-tableref="tableRef"v-loading="tableLoading":data="pageData"highlight-current-rowrow-key="Id"border:height="tableFluidHeight"style="text-align: center; flex: 1"@select="handleTableSelect"@select-all="handleTableSelect"></el-table></template><template #pagination><Paginationv-if="total > 0"v-model:total="total"v-model:page="queryParams.pageIndex"v-model:limit="queryParams.pageSize"@pagination="handleGetTableList"/></template></BaseTableSearchContainer></div>
</template><script setup lang="ts">
const {tableLoading,pageData,total,tableRef,tableFluidHeight,tableResize,
} = useTableConfig<MoItemPackItem>();
</script><style scoped lang="scss"></style>