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

最新推荐文章于 2024-02-17 12:23:33 发布
最新推荐文章于 2024-02-17 12:23:33 发布
阅读量2.5k 收藏 1
点赞数 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
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
element中el-container容器与div布局区分详解
10-15
主要介绍了element中el-container容器与div布局区分详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-footer不贴底部解决办法
最新发布
qq_52720649的博客
02-17 473
切到别的页面变成这样了，最底下多了一个很明显的。主页使用的el-footer看起来还很正常。是这样的,已经有现成的，开干！可以愉快的打代码啦~
【elementUI学习第三步——Container布局】
weixin_43132192的博客
01-07 662
Container布局
ELEMENT-UI如何引入css修改样式
qq_35545811的博客
04-22 2949
修改element-ui样式。使用id选择器，id选择器样式优先级高于类选择器。 <template> <el-container class="container"> <el-header class="header"> <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect"
前端面试八股文 - 面试必备
冰魂魄的博客
04-03 1923
前端面试
2020-04-06
qq_46318574的博客
04-06 457
求大佬指点我的问题，为什么我的CSS效果（header–footer部分）不起作用了 CSS样式 理想效果 代码运行效果 哪里出错了？求大佬指点迷津????
Element布局
黑客三遍猪
02-16 1279
参考 Layout 布局 Container 布局容器 html布局 Layout 通过 row 和 col 组件， 通过 col 组件的 span 属性可以自由地组合布局。 通过 row 组件的 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。 通过 col 组件的 offset 属性可以指定分栏偏移的栏数。 通过 row 组件的 type 属性赋值为 ‘flex’，可以启用 f...
解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法
weixin_30790841的博客
04-10 383
HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。 HTML5的新标签元素有： <header>定义页面或区段的头部； <footer>定义页面或区段的尾部； <nav>定义页面或区段的导航区域； <section>页面的逻辑区域或内容组合；...
elemenetui 布局_element-ui 基础布局
weixin_39685674的博客
12-20 800
Container 布局容器基础用法el-container：外层容器。当子元素中有 el-header 或 el-footer时，全部子元素会垂直上下排列，否则会水平左右排列。el-header：顶栏容器。el-aside：侧边栏容器。el-main：主要区域容器。el-footer：底栏容器。HeaderAsideMainFooterel-container属性：参数类型说明可选值默认值dir...
element-plus在vue3中样式不显示的问题
qq_44947815的博客
07-01 8007
element-plus在vue3中样式不显示的问题
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3.0 配置跨域
热门推荐
shiqinghuan的博客
09-22 1万+
在项目的根目录下创建一个vue.config.js： vue.config.js: module.exports = { devServer: { port: 8023, // 端口 proxy: { '/api': { //请求路径关键字 target: 'http://localhost:8024/management/', //对应自己的接口 changeOrigin: t
this.$refs[name].resetFields()；重置表单失败
shiqinghuan的博客
10-04 1737
要加上prop属性，并且与你v-model的值相同才可以。
vue3.0 引入bootstrap 4
shiqinghuan的博客
09-28 1525
jQuery 安装jQuery 和 popper.js npm install --save jquery npm install --save popper.js 安装bootstrap npm install bootstrap@4 --save 在main.js中引入 import $ from 'jquery'; import "bootstrap"; import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/j
vue elementUI dialog弹框中使用表单 表单无法重置
shiqinghuan的博客
08-24 1303
用 nextTick 处理一下form的数据： this.$nextTick(() => { this.student = student; }) 然后在关闭dialog 时调用重置方法: this.$refs[student].resetFields(); 完整代码： <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible" width="32%" :center="true" top="20px"&gt
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更方便使用。根据官方文档的示例代码，el-container的使用方式如下： ```html <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> ``` 在你提供的代码中，el-container被用作一个装箱容器，包含了el-row和el-col等子元素。这些子元素可以根据需要进行布局和排列。\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [element-ui中el-container容器与div布局区分](https://blog.csdn.net/weixin_42636552/article/details/89157005)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [解决element-ui中container容器布局的问题](https://blog.csdn.net/qq_36373873/article/details/93168238)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值