Element布局的小坑,el-container布局不正常

问题说明

在使用Element-UI的Container布局容器时,我将el-headerel-aside封装成了组件,导致布局出现问题。

Element布局的小坑,el-container布局不正常_第1张图片
布局.png

官方示例代码:


  Header
  
    Aside
    Main
  

我的代码:


     //这里我封装成了组件
    
        
        
            
                
            
        
    

出现问题的布局如下图所示,header下方没有内容了


Element布局的小坑,el-container布局不正常_第2张图片
显示结果.png
问题排查

查了下官网的文档,发现这样一项说明


Element布局的小坑,el-container布局不正常_第3张图片
官网文档.png

封装成组件后,el-container中没有了el-footerel-header,导致子元素排列方向默认为horizontal

问题解决

el-container上增加 direction="vertical"属性


    
    
        
        
            
                
            
        
    

你可能感兴趣的:(Element布局的小坑,el-container布局不正常)