主要实现

整体实现采用纯计算逻辑与响应式副作用分离的思路。拆分通用计算函数和 Composable 业务逻辑，兼顾可复用性和可测试性。

. 纯高度计算函数

抽取独立的高度计算纯函数。无副作用、可单独单元测试，统一高度计算规则。其实，

export function calculateTableMaxHeight({
viewportHeight,tableTop,paginationHeight,extraGap,containerPaddingBottom = 0。minHeight
}) {
const availableHeight =
viewportHeight -
tableTop -
paginationHeight -
extraGap -
containerPaddingBottom;return Math.max);}

计算公式说明：

• 可用高度 = 浏览器视口高度 - 表格顶部距离视口顶部偏移量 - 分页器高度 - 自定义额外间距 - 容器底部内边距；
• 最终取值会与最小高度对比。取最大值，以兜底极端布局场景。说起来，

. Composable 主要封装

封装 useTableHeight 组合式函数。接收表格、分页器 DOM 实例及自定义配置，自动监听布局变化、动态更新表格高度。

import { ref。onMounted,onUnmounted,nextTick,watch } from 'vue';import { calculateTableMaxHeight } from './calculateTableMaxHeight';export function useTableHeight {
const tableMaxHeight = ref;// 默认配置项
const minHeight = options.minHeight?，200;怎么说呢，const extraGap = options.extraGap?，0;
const containerRef = options.containerRef;const watchSources = Array.isArray?options.watchSources :;let resizeObserver = null;// 更新最大高度主要方法
const updateTableMaxHeight = async => {
await nextTick;const tableEl = tableRef?.value，.$el || tableRef?.value，const paginationEl = paginationRef?.value，if return;// 获取元素布局信息
const tableRect = tableEl.getBoundingClientRect;const paginationRect = paginationEl.getBoundingClientRect;const paginationHeight = paginationRect.height || 0;const containerEl =
typeof containerRef?.value === 'object'?containerRef.value : null;const containerStyle =
window.getComputedStyle;const containerPaddingBottom =
Number.parseFloat || 0;// 执行高度计算
tableMaxHeight.value =
calculateTableMaxHeight({
viewportHeight: window.innerHeight。tableTop: tableRect.top,paginationHeight,extraGap,containerPaddingBottom,minHeight
});}，老实说，// 初始化元素尺寸监听
const initTableObserver = => {
updateTableMaxHeight;resizeObserver = new ResizeObserver => {
updateTableMaxHeight;})，if resizeObserver.observe;if resizeObserver.observe;if resizeObserver.observe;}，老实说，onMounted => {
initTableObserver;window.addEventListener;})，onUnmounted => {
window.removeEventListener;resizeObserver?.disconnect，resizeObserver = null;})，// 外部响应式状态变化时重算
watch => {
await nextTick;updateTableMaxHeight;})，return { tableMaxHeight,updateTableMax Height };}

. 关键技术点解析

nextTick 异步更新

Avoids DOM measurement errors by waiting for Vue's next tick after any reactive change that might affect layout.

ResizeObserver + window.resize 双监听

• windows.resize : handles browser window size changes.
• ResizeObserver : monitors local DOM changes—pagination wrap‑around height shifts,component expansion/collapse.
• The combination covers all layout mutation scenarios.

DOM 信息获取方案

• getBoundingClientRect: precise element position and dimensions relative to viewport.
• getComputedStyle: reads actual rendered CSS like padding‑bottom of containers.

实际调用示例