页面容器 - ElePage

5.5.1.快速使用
页面容器组件主要是为了让所有页面都有一个统一的内间距，建议每个页面的最外层都使用该组件，使用示例：
运行代码新窗口打开 ElePage 还会撑开页脚，当页面内容较少时让页脚也在底部显示，页面内容很多时才紧挨着内容。当 EleProLayout 关闭内容区域铺满时 ElePage 会有一个固定的最大宽度并水平居中展示(一般顶栏布局时会不需要内容铺满)。 5.5.2.属性列表设置 :plain="true" 时不会有内间距，以及会取消对 EleProLayout 的关闭内容区域铺满功能的适配。当 :multi-card="true" 时内部的多个卡片之间会有与 ElePage 内间距一样的间距(marginBottom)。 5.5.3.容器内表格高度铺满属性 flexTable 用于设置内部的 EleProTable 高度铺满，还可结合 EleCard 和 EleTabs 以及 EleSplitPanel 使用，示例：

const datasource = ({ pages }) => {
return pageUsers({ ...pages });
};
</script>
运行代码新窗口打开
如果表格父级的层次结构比较深，可以使用 ElePage 当作 div 使用，示例：
<template>
<ele-page flex-table>

<div>其它内容其它内容111</div> <ele-page plain flex-table style="padding: 12px 16px; background: red"> <div>其它内容其它内容222</div> <ele-page plain flex-table style="padding: 12px 16px; background: yellow"> <div>其它内容其它内容333</div> <ele-pro-tablerow-key="userId":columns="columns":datasource="datasource":footer-style="{ paddingBottom: '12px' }"> </ele-pro-table> <div>其它内容其它内容333</div> </ele-page> <div>其它内容其它内容222</div> </ele-page> <div>其它内容其它内容111</div> </ele-page> </template> <script lang="ts" setup> import { ref } from 'vue'; import { pageUsers } from '@/api/system/user';

const columns = ref([
{
label: '用户账号',
prop: 'username'
},
{
label: '用户名',
prop: 'nickname'
}
]);

const datasource = ({ pages }) => {
return pageUsers({ ...pages });
};
</script>
运行代码新窗口打开
5.5.4.底部工具栏
底部工具栏组件主要用于当内容区域非常长有滚动条时在内容底部一直悬浮着一个操作栏，使用示例：
<template>
<ele-page plain hide-footer>
<ele-page>
<ele-card header="Card title">

<div>Card content</div> <div>Card content</div> <div>Card content</div> </ele-card> </ele-page>  <ele-bottom-bar teleported> <div>Some Text</div> <template #extra> <el-button type="primary">提交</el-button> </template> </ele-bottom-bar> </ele-page> </template> 运行代码新窗口打开 EleBottomBar 是一个使用起来非常简单的组件，它的核心在于对 EleProLayout 的各种布局风格以及侧栏的折叠展开进行适配。属性列表：插槽列表：