elementui 容器布局，el-header/el-footer在组件内显示不正常

╰半橙微兮° 2023-07-23 14:00 24阅读 0赞

用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="**vertical**"。**  
官网说明：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

这里如果不加direction属性，header和footer都在组件中，那么久会按左右排列。footer从最内层移出是因为el-main和slideMenu组件部分不需要  
垂直上下排列。