opt_web/src/utils/useTableHeight.ts

/**
 * 计算表格高度
 * @param titleRef 标题容器
 * @param queryRef 查询条件的容器
 */
export function useTableHeight(titleRef: Ref<HTMLElement | null>, queryRef: Ref<HTMLElement | null>) {
  const computeTableHeight = ref({
    titleHeight: 0,
    queryHeight: 0,
    headerHeight: 50,
    dividerHeight: 32,
    toolbarHeight: 51,
    padding: 40,
  });

  const totalOtherHeight = ref(0);
  const tableHeight = ref(0);

  const computeHeight = () => {
    const titleElement = unref(titleRef);
    const queryElement = unref(queryRef);

    computeTableHeight.value.titleHeight = titleElement ? titleElement.scrollHeight : 0;
    computeTableHeight.value.queryHeight = queryElement ? queryElement.scrollHeight : 0;

    totalOtherHeight.value =
        computeTableHeight.value.titleHeight +
        computeTableHeight.value.queryHeight +
        computeTableHeight.value.headerHeight +
        computeTableHeight.value.dividerHeight +
        computeTableHeight.value.toolbarHeight +
        computeTableHeight.value.padding;

    tableHeight.value = window.innerHeight - totalOtherHeight.value;
  };

  onMounted(() => {
    computeHeight(); // 组件挂载时计算一次高度
    window.addEventListener('resize', computeHeight); // 监听窗口大小变化
  });

  onUnmounted(() => {
    window.removeEventListener('resize', computeHeight); // 移除事件监听器
  });

  return { tableHeight: tableHeight as Ref<number> }; // 返回类型注释
}