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

最新推荐文章于 2024-08-02 17:54:22 发布
最新推荐文章于 2024-08-02 17:54:22 发布
阅读量820 收藏
点赞数
文章标签： vue.js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62170162/article/details/130212518
版权
文章讨论了在Vue应用中遇到的加载显示问题，实际上元素已经渲染但因布局被挤压到不可见。错误示例是将el-header置于子组件中，而正确的做法是确保el-header在Main.vue中的el-container结构内，以保证正确的页面布局。
摘要由CSDN通过智能技术生成

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

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

 错误写法：

 

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

 正确写法：

 

 

abaabahualala
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3使用elementUI Plus中的el-container布局容器时不能撑开页面的解决方案
qq_61567032的博客
08-25 3961
使用el-container让Aside、Main、Header等部分充满屏幕的解决办法
Vue3 Element Plus Container布局
会写点代码
06-16 321
Vue3 Element Plus Container布局，el-container,el-header,el-aside,el-main,el-footer
vue3 elementplus使用container布局容器 scroll 失效问题
weixin_44536001的博客
06-05 697
当项目中的layout页面使用了container布局后 此时在展示页面中添加window.addEventListener("scroll")事件和document.body.scrollTop 相关都会失效，原因是因为具体的滚动是在el-mian元素上执行的我们需要在这个元素添加相关的监听操作。
vue3引入elementplus后使用布局容器不生效
qq_50487743的博客
08-09 5299
vue3
elementplus Container 布局容器无法铺满整个页面的解决方案
panwanpeng的专栏
12-28 1182
网上找的方法都太绕了，暴力解决办法就是修改style文件：
vue+ElementPlus框架Container 布局容器不能铺满整个屏幕
enjoyenjoy576423146的博客
04-10 5857
直接使用ElementPlus框架的Container 布局容器，在页面中没有铺满，查看可知，有padding20px，高度也只有一半，因此添加了scc。
Element el-container 布局容器组件详解
热门推荐
程序员大阳
01-27 2万+
1. 背景 由于一般的网页布局，也就是分个侧边导航栏，顶部标题栏，中间内容区域，以及底部版权信心栏。 element为了方便开发人员使用，直接提供了布局容器组件，可以很方便的直接生成上述的布局栏。 2. 全局样式 为了让网页的布局占满屏幕，一般在开始布局之前，设定下全局样式，修改index.html，添加全局样式代码如下。 <style> html,body,#app{ height:100%; margin: 0px; paddi
Element Plus Container布局容器设置height: 100%无效
zero2one
08-30 4545
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
使用element UI中的Container 布局容器时显示两个滚动条如何解决
weixin_44479794的博客
04-22 5195
在做一个门户网站时，使用了vue+elementUI，然后使用了Container 布局容器，但是发现会出现两个滚轮，这显然是不符合逻辑的。 解决方法： 如果需要隐藏main的滚轮则在 el-main中设置overflow-y: hidden;样式 如果需要溢出部分的内容并交给浏览器最外边的滚动条，则设置overflow: visible; 如果本篇文章对你有帮助，请点赞鼓励一下，谢谢 ...
ElementUI 组件：Container 布局容器
ChinaDragon10的博客
01-31 2740
ElementUI 组件：Container 布局容器
element中el-container容器与div布局区分详解
10-15
在案例中，开发者试图在一个 `el-container` 内部使用 `el-row` 和 `el-col` 来布局弹出框内容。然而，这导致了预期之外的结果，原本应该出现在最后一行的操作按钮被放置到了第一行。问题的根源在于，`el-container`...
Android 百度地图marker中图片不显示的解决方法(推荐)
08-28
然而，在加载图片完成之前， BitmapDescriptor 对象已经生成了，这会导致图片无法显示的问题。 解决这个问题的方法是等到图片加载完毕后再生成 BitmapDescriptor 对象，从而设置 MarkerOptions。下面是一个解决方案...
vue开启keep-alive缓存时，关于子组件上使用:key=“id“的问题以及解决方案
weixin_45549481的博客
08-02 235
2、致命错误，修改URL的id时，缓存之前有数据，子组件销毁重建，请求接口也有数据，但是因为keep-alive缓存了组件实例而不是组件的数据，表格的数据丢失；2、:key=“timeStap”，结合activated、deactivated —— —— keep-alive缓存activated时，会重新请求。1、切换tag，会触发id的变更，再次切回来时，将会触发表格销毁重建，重新请求数据，局部刷新表格的缓存丢失；特定场景下，必须使用:key="id"时，可以考虑下面的两个方式。
第十四节：Vben Admin实战-系统管理之角色菜单绑定
最新发布
cui_win的专栏
08-02 233
权限管理部分，目前已经实现了角色，用户，菜单的管理，现在还剩余一个重要的部分，是角色和菜单的动态绑定。Vben Admin 演示案例部分，是在角色管理的抽屉弹出框实现的，但是感觉展示不够直观，我们这里用一个单独的页面实现这部分的功能。src/api/sys/role.ts 文件中定义：# 角色菜单关联表现在权限管理部分的功能基本已经都实现了，还记得第七节：Vben Admin权限-后端获取路由和菜单。
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 422
SignList这三个页面就是需要切换的页面。
vue+eacharts+springboot柱状图展示
qq_42666729的博客
08-01 765
backgroundColor: 'rgba(0,122,280,0.6)', // 文本标签的背景颜色。data: this.chartData1.yData, // y轴数据。position: 'top', // 可以根据需要设置数值显示的位置。data: this.chartData1.xData, // x轴数据。color: 'black' // 设置x轴颜色为黄色。color: 'red', // 设置y轴颜色为黄色。color: '#000', // 设置字体颜色为黑色。
在 VueJS 中使用事件委托处理点击事件（事件委托，vue事件委托，什么是事件委托，什么是vue的事件委托）
weixin_65793170的博客
08-01 1151
⭐在开发 Vue 项目时，我们经常需要处理大量的点击事件。为每个可点击的元素单独添加事件监听器不仅会增加代码的复杂度，还会降低性能。事件委托是一种有效的优化方式，它可以显著减少事件监听器的数量，提高代码的可维护性和执行效率。我们通过一个实际示例，详细讲解如何在 Vue 项目中使用事件委托。简单记录一下
container布局容器
09-01
Container布局容器是一个使用了flex布局的组件，它可以用来创建包含顶栏、侧边栏、主要区域和底栏的布局容器。 这个布局容器的子元素只能是后四个组件(顶栏容器、侧边栏容器、主要区域容器、底栏容器)，并且后四个组件的父元素也只能是Container布局容器本身。 如果外层容器的子元素中包含顶栏或者底栏，那么子元素会垂直排列；如果外层容器的子元素中不包含顶栏和底栏，子元素会水平排列。你可以通过设置外层容器的direction属性来改变内部子元素的排列方式，可以选择vertical（垂直）或horizontal（水平）。 使用Container布局容器进行嵌套可以实现更灵活的布局方式。比如，你可以在一个外层容器中包含顶栏或者底栏，这样外层容器中的布局就是垂直排列的。然后在垂直排列的外层容器内部再嵌套一个外层容器(el-container)，这样内层的外层容器中的布局方式就是水平排列的。 在使用Container布局容器时，你可以通过设置容器组件的属性来控制布局样式。例如，可以使用direction属性来设置子元素的排列方式，使用height属性来设置顶栏或者底栏的高度，使用width属性来设置侧边栏的宽度等。 总结起来，Container布局容器是一个非常实用的组件，可以帮助我们创建灵活多样的布局容器，同时可以通过设置属性来控制布局样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [container布局容器 [ElementUI]](https://blog.csdn.net/m0_57001006/article/details/125840494)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [002_Container布局容器](https://blog.csdn.net/aihiao/article/details/122951940)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值