XtPage 页面组件

XtPage 页面组件

页面布局组件，提供 header、main、footer、aside 区域的布局，支持高度自适应。

基本用法

基本用法

<template>
  <XtPage>
    <template slot="header">页面标题</template>
    <template slot-scope="scope">
      <XtTable
        :table-data="tableData"
        :height="scope.tableHeight"
        :columns="columns"
      />
    </template>
    <template slot="footer">页面底部</template>
  </XtPage>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 }
      ],
      columns: [
        { prop: "name", label:"姓名" },
        { prop: "age", label:"年龄" },
        { label: '操作', slot: 'action' }
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

属性说明

属性	类型	默认值	说明
showHeader	Boolean	true	是否显示头部
showFooter	Boolean	true	是否显示底部
showAside	Boolean	true	是否显示侧边栏
asideWidth	String	'240px'	侧边栏宽度
diffHeight	Number	0	差值高度（用于表格高度微调）
minTableHeight	Number	200	表格最小高度
tableBorderHeight	Number	1	表格边框高度（参与自适应计算）

插槽说明

插槽名	说明
default	主内容区域，接收 tableHeight 参数
header	头部区域
footer	底部区域
aside	侧边栏区域
dialog	弹窗区域

示例

带侧边栏

带侧边栏

<template>
  <XtPage aside-width="200px">
    <template #header>页面标题</template>
    <template #aside>侧边栏内容</template>
    <template #default>主内容</template>
  </XtPage>
</template>

显示代码 复制代码 复制代码

仅主内容

仅主内容

<template>
  <XtPage :show-header="false" :show-footer="false" style="height: 600px;">
    <template #default="{ tableHeight }">
      <div class="multiline-box" :style="{ height: tableHeight+'px' }">自适应容器</div> 
    </template>
  </XtPage>
</template>

显示代码 复制代码 复制代码

注意事项

• 默认插槽会传入 tableHeight 参数，用于表格高度自适应
• 组件通过 ResizeObserver 监听容器尺寸变化（旧浏览器降级为 window.resize），自动调整表格高度