elementPlus 使用container布局容器不当导致内容不加载，无效，不显示

最新推荐文章于 2023-12-28 11:28:51 发布
最新推荐文章于 2023-12-28 11:28:51 发布
阅读量754 收藏
点赞数
文章标签： vue.js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62170162/article/details/130212518
版权

 其实不是不加载，在控制台检查相关标签，其实已经渲染存在，只是被其他元素挤到页面底部，看不见了

 el-aside等子组件必须以el-container为亲元素，即使是把el-aside放在子路由组件，然后再引入也不行。

 错误写法：

 

上面的el-header必须放在Main.vue中，而不能写在commonHeader然后再引入

 正确写法：

 

 

abaabahualala
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element中el-container容器与div布局区分详解
10-15
主要介绍了element中el-container容器与div布局区分详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-plus离线文档
05-07
element-plus离线文档，node服务已经配置好，直接node server.js即可使用，可以在内网部署，已经部署成功。
Docker学习之Container容器的具体使用
09-29
主要介绍了Docker学习之Container容器的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
[vue3] 使用ElementPlus页面布局搭建架子
沫洺的博客
09-17 6129
🎫ElementPuls页面布局🎫动态菜单显示
vue3引入elementplus后使用布局容器不生效
qq_50487743的博客
08-09 4745
vue3
Vue使用element-ui/plus组件布局容器container失效解决方法
only_learn的博客
10-20 4071
注意，我在SideNav，Header,Main,Footer组件套了el-aside,el-header...原来，elementui不支持这种写法，在Home里面应该完全遵循官网的写法，这个错我遇到了好几次，每一次都花了很长时间解决，还是决定写个笔记记录一下。，不能写在子组件里面然后引入，不然elementui不会识别为布局容器。我在确定elementui引入正确的情况下是这样写的。在使用elementu官网的布局容器时，他是这样的。当然错误，布局一片混乱。想了一下午终于懂了。
Vue3使用elementUI Plus中的el-container布局容器时不能撑开页面的解决方案
qq_61567032的博客
08-25 3842
使用el-container让Aside、Main、Header等部分充满屏幕的解决办法
vue+ElementPlus框架Container 布局容器不能铺满整个屏幕
enjoyenjoy576423146的博客
04-10 5024
直接使用ElementPlus框架的Container 布局容器，在页面中没有铺满，查看可知，有padding20px，高度也只有一半，因此添加了scc。
Docker容器:那些你不知道的事
02-25
先说说我们知道的事，Docker是PaaS提供商DotCloud开源的一个高级容器引擎，源代码托管在Github上，基于go语言并遵从Apache2.0协议开源。Docker相当于物理行业的集装箱对物流的影响一样，成为Container上运行镜象的统一打包和交换的标准，Docker介绍请参看文章容器演进和技术基础介绍。我们知道，Docker使用了容器的环境隔离和资源限制技术，把镜像和运行环境打包到Image中。Register支持容器上传和下载功能。我们知道，Docker同时提供了Build，Ship和Run，运维只需要在环境重配置好Docker，剩下的工作就是部署容器，实现BuildOnce
Element Container布局容器百分之百显示
DoubleInjured的博客
08-14 704
Element Container布局容器百分之百显示
element-plus组件库快速上手教程
web18296061989的博客
03-03 3283
前言 一般我们开发单页面应用（关于单页面应用是什么在本专栏的另一篇文章中有介绍）时，特别是针对和我一样打算走后端开发的同学，对于前端只需要有了解的程度就行了，但是平常做项目练手时经常会要自己写前端的东西，所以本文的主旨就是让各位和我一样的后端开发的同学能快速使用element-ui提供的网页组件快速搭建自己需要的网页。 小tips 在Idea中安装一个叫“element”的插件，就可以在Idea中写element组件的关键词时快速生成基本代码，比如我现在想要生成一个el-button： 在安装了eleme
Element Plus Container布局容器设置height: 100%无效
zero2one
08-30 4354
Element Plus Container布局容器设置height: 100%无效 一、在el-container中设置高度无效 设置高度，el-container高度等于父元素#app的高度，#app的高度的父节点是body，body的父节点是html,默认情况下html和body的高度为auto,浏览器不会自动给标签添加高度，因此自然就无效了 二、解决 在App.vue中添加 html,body,#app{ height: 100% } 然后在el-container中添加heig
Vue3+Element-Plus 主页布局功能功能开发 二二
热门推荐
码侬人生
12-01 1万+
1.最终布局效果 2. 布局分析：先上下划分，再左右划分 3. 整个主页布局需要使用到element-plus 里面的一些布局组件 ，分别是： <el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 C...
解决element-ui中container容器布局的问题
Charis--Cai
06-21 1万+
根据项目需求，我要得是这种效果： 根据官方文档，代码如下： <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>...
ABAP-GUI的导出到excel的系统自带按钮
weixin_42559610的博客
09-11 847
按钮&XXL
elementplus Container 布局容器无法铺满整个页面的解决方案
最新发布
panwanpeng的专栏
12-28 967
网上找的方法都太绕了，暴力解决办法就是修改style文件：
vue3-elementplus 后台管理系统的Layout布局
weixin_45574675的博客
08-10 2239
后台管理系统Layout布局，采用动态路由
elementplus的布局容器
08-31
Element Plus 提供了多个布局容器组件，用于实现灵活的页面布局。以下是一些常见的布局容器组件： 1. Row 行容器：用于水平排列的容器，可以将列容器（Col）放置在其中，实现响应式的网格布局。 2. Col 列容器：用于垂直排列的容器，可以放置内容或其他嵌套容器。可以设置不同的列宽、偏移量和响应式断点。 3. Container 容器：用于包裹页面的主体内容，具有居中和固定宽度等样式设置。 4. Aside 侧边栏容器：用于实现页面侧边栏的容器，可以放置菜单、导航等内容。 5. Header 头部容器：用于包含页面顶部的导航栏或标题等内容。 6. Footer 底部容器：用于包含页面底部的版权信息、链接等内容。 这些布局容器组件可以根据需要进行灵活组合和嵌套，以实现复杂的页面布局效果。你可以在 Element Plus 的官方文档中找到更详细的使用说明和示例代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值