解决element-ui中container容器布局的问题
根据项目需求,我要得是这种效果:根据官方文档,代码如下:<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>...
·
根据项目需求,我要得是这种效果:
根据官方文档,代码如下:
<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>
我的布局如下:
我的布局得到效果是:只有Header部分,Aside和Main部分都不见了。
后来通过查阅官方文档,发现:
封装成组件后,el-container
中没有el-footer或
el-header
,导致子元素排列方向默认为horizontal。
解决方法有两种:
1. 加上direction="vertical"
2.加上el-header,此时应将封装的TheHeader中的el-header容器换掉(我换成的是div,布局没有影响)。
纯属做笔记,也希望各位大佬指点。
更多推荐
已为社区贡献1条内容
所有评论(0)