使用 ElContainer
ElContainer 是一个基本的布局容器，用于包裹页面的主要内容。在你的组件模板中，你可以这样使用它：
<template>
<el-container>
<!-- 其他布局组件或内容 -->
</el-container>
</template>
ElHeader、ElAside、ElMain 和 ElFooter
在 ElContainer 内部，你可以使用 ElHeader、ElAside、ElMain 和 ElFooter 这四个子组件，用于定义页面的头部、侧边栏、主体和底部。这样可以更方便地创建不同区域的布局。
<template>
<el-container>
<el-header>头部内容</el-header>
<el-aside>侧边栏内容</el-aside>
<el-main>主体内容</el-main>
<el-footer>底部内容</el-footer>
</el-container>
</template>
使用固定宽度
你可以使用 fixed 属性为 ElHeader、ElAside 和 ElFooter 设置固定宽度。例如：
<template>
<el-container>
<el-header fixed>固定头部</el-header>
<el-aside fixed>固定侧边栏</el-aside>
<el-main>主体内容</el-main>
<el-footer fixed>固定底部</el-footer>
</el-container>
</template>
使用抽屉式侧边栏
你可以使用 ElAside 的 v-model 属性来实现抽屉式的侧边栏。例如：
<template>
<el-container>
<el-aside :span="4" v-model="asideVisible">侧边栏</el-aside>
<el-main>
<el-button @click="toggleAside">切换侧边栏</el-button>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
asideVisible: true
};
},
methods: {
toggleAside() {
this.asideVisible = !this.asideVisible;
}
}
};
</script>
在这个例子中，通过点击按钮可以切换侧边栏的显示和隐藏。
以上是关于 ElContainer 及其相关组件的基本使用说明。使用这些组件，你可以方便地构建出不同区域的布局，满足不同页面的需求。详细的文档和更高级的用法可以在 Element Plus 的[官方文档](https://element-plus.org/#/zh-CN/component/container)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/5518/ElementPlus