表格高度管理

高度计算配置

在 setupPageTemplate 中配置 calculateHeight 函数，用于计算表格高度。

setupPageTemplate({
  dependencies: {
    // formHeight: 搜索表单高度
    // otherHeight: Table 组件传入的额外高度偏移（用于特殊页面布局）
    calculateHeight: (formHeight, otherHeight = 0) => {
      const navbarHeight = 50;
      const tagsHeight = 34;
      const padding = 16;
      const paginationHeight = 56;

      return (
        window.innerHeight -
        navbarHeight -
        tagsHeight -
        padding -
        formHeight -
        otherHeight -
        paginationHeight
      );
    },
  },
});

Table 组件 otherHeight 属性

当页面有额外的固定高度元素（如 Tab 栏、统计卡片等）时，可以通过 otherHeight 属性传入额外的高度偏移。

<template>
  <!-- 页面有额外的 Tab 栏，高度 40px -->
  <div class="tab-bar" style="height: 40px">...</div>

  <PageTemplate>
    <template #table>
      <!-- 传入额外高度偏移 -->
      <Table :otherHeight="40" />
    </template>
  </PageTemplate>
</template>

高度事件发射器

用于在表格高度变化时触发更新。

import { useTableHeightEmitter } from "vue-admin-kit";

// 在组件中使用
const emit = defineEmits(["setTableHeight"]);
const { emitSetTableHeight } = useTableHeightEmitter(emit);

// 手动触发高度更新
emitSetTableHeight();

useTableHeight Hook

import {
  useTableHeight,
  resetTableHeightState,
  resetAllTableHeightStates,
} from "vue-admin-kit";

// 基础用法
const { calculateTableHeight } = useTableHeight();

// 多表格场景，使用 instanceKey 隔离
const { calculateTableHeight } = useTableHeight({
  instanceKey: Symbol("table1"),
});

// 手动触发高度计算
calculateTableHeight();

// 重置单个实例状态
resetTableHeightState(instanceKey);

// 重置所有实例状态
resetAllTableHeightStates();