element-plus的容器組件主要有el-container,el-aside,el-header,el-main,el-footer,后面4個組件其父組件必須是el-container。
el-container采用flex布局，如果其子元素包含el-header或el-footer時會采用垂直布局，否則會采用水平布局，可設置其direction屬性為’horizontal’ | ‘vertical’。
el-aside為側邊欄組件，可設置其width屬性
el-main為主區域容器
el-header為頭部容器
el-footer為尾部容器
<template><el-container :direction="vertical" style="height: 90vh"><el-header height="" style="background-color: orange;"><!-- Header content --></el-header><el-container :direction="horizontal"><el-aside width="200px"><!-- Aside content --></el-aside><el-container :direction="vertical"><el-main height="" class="item" style="height: 90%"><!-- Main content --></el-main><el-footer height="" style="background-color: blue;"><!-- Footer content --></el-footer></el-container></el-container></el-container></template><style scoped>
.item {background-color: red;
}</style>
https://element-plus.org/zh-CN/component/container.html#main-api
