elementui 容器佈局，el-header/el-footer在組件內顯示不正常

用elementui佈局，怎麼導航啊，左側菜單啊就左右排列了，類似下圖

 

入口

<template>
  <el-container direction="vertical">
    <OutLayoutHeader></OutLayoutHeader>
    <el-container direction="vertical">
      <el-container>
        <OutLayoutSlideMenu></OutLayoutSlideMenu>
        <el-main>Main</el-main>
      </el-container>
      <OutLayoutFooter></OutLayoutFooter>
    </el-container>
  </el-container>
</template>

<script>
import OutLayoutHeader from './components/OutLayout/Header.vue'
import OutLayoutSlideMenu from './components/OutLayout/SlideMenu.vue'
import OutLayoutFooter from './components/OutLayout/Footer.vue'

export default {
  name: 'app',
  components: {
    OutLayoutHeader,
    OutLayoutSlideMenu,
    OutLayoutFooter
  }
}
</script>

header部分，很簡單，只爲顯示

<template>
  <el-header>Header</el-header>
</template>

footer部分一樣，很簡單，只爲顯示

<template>
  <el-footer>Footer</el-footer>
</template>

官網的示例代碼裏，footer是和main放在一個容器中的。

入口部分在兩個el-container中增加了兩個屬性，direction="vertaical"。
官網說明：外層容器。當子元素中包含 <el-header> 或 <el-footer> 時，全部子元素會垂直上下排列，否則會水平左右排列。

這裏如果不加direction屬性，header和footer都在組件中，那麼久會按左右排列。footer從最內層移出是因爲el-main和slideMenu組件部分不需要
垂直上下排列。