Element-ui中Container布局容器的坑

今天在用Element-ui的Container布局的时候，我把头部和底部和主要内容分成了三个组件，在APP.vue中调用在一起。但是发现看不到内容，后来发现原来是全部变成水平排列了。

这是我一开始写的代码

APP.vue

<template><div id="app"><el-container><app-header></app-header>  //顶部导航组件<index></index>    //主要内容组件<app-footer></app-footer>    //底部组件</el-container></div>
</template>

标题header.vue

<template><el-header class="header_container" height="64"><el-row>...</el-row></el-header>
</template>

后来查了下文档发现

但是按我的想法来说没有问题呀，子元素中有el-header和el-footer了，应该默认为vertical，垂直布局才对的。
后来百度之后才知道，当由几个组件封装到一起的时候是没有用的，所以要自己给el-container加上direction属性为horizontal

<el-container direction="vertical">

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！