elementUi布局爬坑----Container布局缺少el-header和el-footer导致页面布局混乱

在使用elementUI的Container布局时，我将el-header和el-footer封装成了组件，导致布局出现问题。

官方demo是这样的：

 

 

 

 由于我需要把Header和Footer封装成组件，运行后布局却乱了。

 

运行结果：

 

 

查阅官文发现：

 

 所以需要在container上加上direction="vertical"：

 

 运行成功：