element UI使用el-container布局时 丢失el-header 和 el-footer

最新推荐文章于 2024-06-02 15:10:46 发布
最新推荐文章于 2024-06-02 15:10:46 发布
阅读量2.7k 收藏 2
点赞数 3
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiqinghuan/article/details/108724558
版权

在element UI使用el-container布局时将 el-header ，el-main ，el-footer封装成组件，导致丢失了布局样式，导致布局错误在这里插入图片描述
在这里插入图片描述
官网文档：
在这里插入图片描述
封装成组件后，el-container中没有了el-footer，el-main和el-header，导致子元素排列方向默认为horizontal

问题解决

在el-container上增加 direction="vertical"属性
在这里插入图片描述
在这里插入图片描述

清欢·
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【bug】关于vue3引用elementplus组件没有样式只有文字不生效的问题
weixin_44372834的博客
08-29 2863
背景：【bug】关于vue3引用elementplus组件没有样式只有文字不生效的问题，一直不生效，一开始找不出原因。版本： vue 3.2.13，element-plus 2.2.14。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
Elementui的el-footer标签使用报错
c_studer_的博客
05-06 378
​ 警告信息表示 Vue 不识别。el-footer的报错信息。在组件中进行引入和暴露。
Vue中引入elementUI中的container组件失效
最新发布
weixin_42171832的博客
06-02 373
1.不用修改官网中任何css或者html。2.按需引入，不是只是引入官网的就可以。
Vue3 Element-Plus样式丢失问题
YZero_cn的博客
02-06 1159
将element-plus版本手动调高一点再重新安装,发现有dist目录了,样式正常了
vue3引入elementplus后使用布局容器不生效
qq_50487743的博客
08-09 5193
vue3
Element Plus 配置自动按需引入后，手动引入组件，组件样式丢失
szw-yunie的博客
06-25 2298
我使用到了一个 ElTree 组件，把官方实例代码拷过来后，怎么看都跟官网文档上的样式不一样。F12一看，对应的html标签里有类名，但是在style里面却找不到类名对应的样式。于是但是这样做却也是。在网上一顿搜索也没找到解决办法，甚至连样式丢失的原因也找不到，真是见鬼。
element 卡片el-card 点击事件不生效
陈新科的博客
12-24 2013
加个.native就可以：@click.native="obj" .native修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
element中el-container容器与div布局区分详解
10-15
3. 当需要使用 `el-row` 和 `el-col` 进行细粒度的栅格布局时，应将它们置于 `div` 而非 `el-container` 内。 4. 对于复杂布局，理解并正确应用 Flex 布局原理至关重要，因为Element UI的许多组件都依赖于Flex布局。...
element ui 对话框el-dialog关闭事件详解
08-27
在这里，我们使用了 Element UI 的 `this.$confirm` 创建了一个确认对话框，只有当用户确认关闭时才会调用 `done()`，否则不执行关闭操作。 ### 4. 关闭事件与确认按钮 `el-dialog` 提供了预定义的“确认”和...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
elementui 容器布局，el-header/el-footer在组件内显示不正常
有问题可关注公众号：前端研究院 后台输入问题回复
04-08 1万+
用elementui布局，怎么导航啊，左侧菜单啊就左右排列了，类似下图 入口 <template> <el-container direction="vertical"> <OutLayoutHeader></OutLayoutHeader> <el-container direction="vertical"&...
element-plus在vue3中样式不显示的问题
qq_44947815的博客
07-01 8352
element-plus在vue3中样式不显示的问题
vue3项目引入element-plus模块样式不生效问题解决
LoFreedomAND的博客
07-19 1万+
手动创建vue3项目后，在搭建页面时需要使用UI库时，按照官方给的步骤操作之后，很遗憾样式并没有生效，上网查了，众说纷纭，有的说是卸载后重新安装，但是我的问题还没有解决，后来在一篇文章中找到了答案，这里记录一下，希望能帮到有同样问题的你。好了，直接看解决办法。.........
HTML5中footer结构元素不显示的一种原因及解决方案
weixin_41682106的博客
03-16 2768
开始的时候，编码如下&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;网页全知道&lt;/title&gt; &lt;style&gt; header,section,f
Element-Ui组件（一）页面布局
热门推荐
究极死胖兽的博客
05-30 6万+
Element-Ui组件（一）页面布局 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 常用布局 el-row与el-col可搭配实现24格栅格布局，若布局较复杂，可以嵌套使用。 el-container作为布局容器（可以嵌套使用），内部可包含el-header（顶栏），el-aside（侧边栏），el-main（内...
vue项目页面底部空白
ab_er的博客
05-18 667
前端项目页面底部空白
element ui布局初识
sinat_36227086的博客
08-25 345
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 <el-footer>：底栏容器。 所以如果想要使侧边栏和主体容器并行排列，则需要再新建一个el-container标签，里面只放el-aside和e
elementui的el-container
07-28
Element UI的el-container是一个装箱容器，它的子元素只能是el-header、el-aside、el-main和el-footer，而这些子元素的父元素也只能是el-container。\[1\]在使用Element UI编写页面时，el-container通常比div更方便...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值