element-ui 布局拆分组件，布局出现问题

问题说明

在使用element ui 进行布局时，我将各个部分拆分成单独的组件，但是出现了布局混乱问题，看下图

官方示例，拿来直接用的时候的效果：

将各个部分拆分成组件后：

我们看到布局已经乱了，头部和主体部分已经在一行显示了。

问题解决

查看element ui 文档说明，发现下面一个属性

OK，我们给 el-container 增加这个属性

<el-container direction="vertical"><Header /><Main />
</el-container>

再看布局，正常显示

如果文档帮到你，请点赞呦，谢谢~

原文链接：（侵删）

Element布局的小坑，el-container布局不正常 - 简书

Cikayo个人博客https://www.cikayo.com/

element-ui 布局拆分组件，布局出现问题相关推荐

Element UI学习记录之布局
目录 Element UI学习记录之布局一.Layout布局二.Container布局容器 Element UI学习记录之布局一.Layout布局基本概念:一行通过分割为24栅格栏进行布局,如 ...
element ui搜索栏响应式布局
需求(主要根据自己需求): 在做系统模块中,需要搜索的功能比较多,比如时间.name.导出.导入等等.搜索栏不能在同一行(根据领导需要)(记录问题,不喜勿喷) 问题描述: 不是说屏幕小很正常,但是屏幕 ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
element ui 控件与布局学习(自用)
(开始之前:=>如果你的学习经历坎坷或学校垃圾或者讨厌前端而; 不知道如何使网页缩放页面布局不变只会吞噬布局)=>body中加上min-width: 1300px;就好了 <body ...
element ui 多个子组件_ElementUI 技术揭秘（2）组件库的整体设计
需求分析当我们去实现一个组件库的时候,并不会一上来就撸码,而是把它当做产品一样,思考一下我们的组件库的需求.那么对于 element-ui,除了基于 Vue.js 技术栈开发组件,它还有哪些方面的需 ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

element-ui 布局拆分组件，布局出现问题

问题说明

问题解决

element-ui 布局拆分组件，布局出现问题相关推荐

最新文章

热门文章