問題說明

在使用Element-UI的Container布局容器時，我將el-header和el-aside封裝成了組件，導(dǎo)致布局出現(xiàn)問題。

布局.png

官方示例代碼：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

我的代碼：

<el-container  class="container">
    <v-head></v-head> //這里我封裝成了組件
    <el-container class="container">
        <v-sidebar></v-sidebar>
        <el-main>
            <transition name="move" mode="out-in">
                <router-view></router-view>
            </transition>
        </el-main>
    </el-container>
</el-container>

出現(xiàn)問題的布局如下圖所示，header下方?jīng)]有內(nèi)容了

顯示結(jié)果.png

問題排查

查了下官網(wǎng)的文檔，發(fā)現(xiàn)這樣一項說明

官網(wǎng)文檔.png

封裝成組件后，el-container中沒有了el-footer和el-header，導(dǎo)致子元素排列方向默認為horizontal

問題解決

在el-container上增加 direction="vertical"屬性

<el-container  class="container" direction="vertical">
    <v-head></v-head>
    <el-container class="container">
        <v-sidebar></v-sidebar>
        <el-main>
            <transition name="move" mode="out-in">
                <router-view></router-view>
            </transition>
        </el-main>
    </el-container>
</el-container>