多表格场景

从 v1.0.3 开始，每个 PageTemplate 实例自动创建独立的高度状态，无需任何额外配置。

使用场景

• 同一页面多个表格
• Tab 切换保留状态
• 使用 v-show 或 CSS 控制显示/隐藏的多表格场景
• keep-alive 缓存多个页面

基础用法

直接使用即可，状态隔离是自动的：

<script setup>
import { PageTemplate, Table, useState } from "vue-admin-kit";

const active = ref("1");
</script>

<template>
  <div>
    <el-tabs v-model="active">
      <el-tab-pane label="表格1" name="1" />
      <el-tab-pane label="表格2" name="2" />
    </el-tabs>

    <div class="tab-panels">
      <div class="tab-panel" :class="{ 'is-active': active === '1' }">
        <Table1 />
      </div>
      <div class="tab-panel" :class="{ 'is-active': active === '2' }">
        <Table2 />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab-panels {
  position: relative;
}

.tab-panel {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;

  &.is-active {
    visibility: visible;
    opacity: 1;
    position: relative;
    pointer-events: auto;
  }
}
</style>

子组件实现

<!-- Table1.vue / Table2.vue -->
<script setup>
import { PageTemplate, Table, useState } from "vue-admin-kit";

useState({
  api: {
    /* ... */
  },
  searchConfig: [
    /* ... */
  ],
  formConfig: [
    /* ... */
  ],
  columnsConfig: [
    /* ... */
  ],
});
</script>

<template>
  <PageTemplate>
    <template #table>
      <Table />
    </template>
  </PageTemplate>
</template>

工作原理

每个 PageTemplate 组件在创建时会自动生成独立的高度状态，并通过 Vue 的 provide/inject 机制传递给内部的 Table 组件。

• 状态隔离是自动的，无需手动配置
• keep-alive 切换时会自动重新计算高度
• 不同页面/Tab 之间互不干扰