el-collapse折叠面板组件中的面板内容是el-table，展开的时候高度异常

最新推荐文章于 2024-08-01 10:23:45 发布
最新推荐文章于 2024-08-01 10:23:45 发布
阅读量3.5k 收藏 4
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Element-ui css table 文章标签： vue.js css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44735915/article/details/108487860
本文解决了一个常见的Element-UI组件问题：在el-collapse-item中使用el-table时，面板展开后表格高度先异常增高再恢复正常。通过调整el-table的style属性，增加底部内边距来解决这一问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

网上搜到的说法，element-ui折叠面板，el-collapse-item 中放一个 el-table, 展开的时候高度先是比表格内容高，然后闪一下突然回到正常的高度；

我自己是 el-table 的style属性加个底部内边距，具体数值调试一下。

vue3通过折叠面板el-collapse、css、div封装实现体征的录入数据界面，使用了折叠面板el-collapse纯div封装的类似table的样式，增加横向，纵向滚动条
qq_28813031的博客
09-16 1977
<!--作者：dingwangjun--> <!-- 界面描述：编辑体征的录入数据界面，使用了折叠面板el-collapse纯div封装的类似table的样式 --> <template> <div class="div_size_fill divSignEdit" style="padding: 5px;"> <div style="height: 45px;line-height: 45px;width: 680px.
el-table 树形表格 自定义展开图标_实践一个树形组件
weixin_39916355的博客
10-22 2415
想实践一个树形组件的起因是发现目前主流UI库在树形组件上都没有提供连接线(ant design有，但不知道为什么设计得发虚，就是各元素之间没有严格衔接上，见下图，而Vue生态圈中的Element UI和iView压根都不支持)。对我这种没有钛合金狗眼的人来说常常会看歪了。所以自己想禽兽，啊不，亲手尝试一个。仅仅实践最最基本的树形结构的展现、展开、折叠，不包含高级的多选、拖动、自定义渲染等功能。弄完...
Element Collapse 折叠面板的使用方法
12-28
本文来源于Element官方文档： http://element-cn.eleme.io/#/zh-CN/component/collapse 基础用法 普通折叠面板 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</
elementui中el-collapse中嵌套el-table展开时底部回弹一小段问题
AdiligentBoy的博客
08-01 867
elementui中el-collapse中嵌套el-table展开时底部回弹一小段问题
el-menu的collapse展开隐藏功能导致的视口宽度/高度异常问题
weixin_41740463的博客
01-12 2318
其中flex：1使得该盒子覆盖当前页面剩余的部分，width使用了calc的写法，使得其宽度得到了控制。改盒子的完整css为。这时候对异常的盒子进行css修改，这里导航的默认展开宽度为200px，所以我设置div的css为。
vue3 uview-plus Collapse 折叠面板高度自适应问题
qq_51946037的博客
03-26 1720
Collapse面板的数据是动态获取的，并且面板中的数据会有增删的操作，所以需要面板能自动适应内容的高度，避免出现高度不够内容显示不全，或多出一截空白的情。过ref获取面板，并调用uview提供的方法init()重新初始化内部高度计算。
el-Collapse 折叠面板中嵌套 el-table
学习记录
05-09 5483
el-Collapse 折叠面板中嵌套 el-table 这个是el-collapse中嵌套el-table，并且可以在页面中实现无限滚动。 效果图： 一、实现步骤 首先我们需要一个折叠面板的框架代码 <el-collapse style="overflow: auto; height: 480px"> <el-collapse-item title="奖励"> // 表格 </el-collapse-item> //
el-collapse 折叠面板可以包裹table下的el-table-column吗
最新发布
05-28
在 Element UI 中，虽然 `el-collapse` 和 `el-table` 是两个独立的组件，但可以通过嵌套的方式将 `el-table-column` 放置在 `el-collapse-item` 内部。这种方式允许用户在折叠面板中展示表格列的内容，从而实现更...
一个属性border-collapse解决Table的边框问题
09-25
在网页设计中，表格（Table）是构建和组织内容的一种常用元素，但在过去，带边框的表格设计却经常让网页开发者感到头疼。原因在于，如果要创建一个看起来整洁美观的表格，需要花费大量的时间和精力去调整边框，以...
el-table高度不正确
wusq的博客
07-29 3907
问题： 如图，表格拥有的高度是红色框的，但是显示的时候高度却只有橙色框 原因： 查看控制台发现，el-table__body-wrapper is-scrolling-none属性有个内联样式，height值为220px，而且这个值会随着控制台的拖动变化。 解决： 在全局样式添加代码。其中multiple-table是表格的class .multiple-table /deep/.el-table__body-wrapper { height: 90%!important.
解决el-table不能自适应高度
CZB_Joker的博客
03-27 853
styleheight600px</</</</</</能看到，表格的高度被限制了，下面还有一大片空白，没有自适应。
elementui Collapse点击展开时请求加载数据
沧海一粟
09-21 8948
看了哈，博主是把id绑定到折叠面板的name属性实现的，感谢！ 如下图所示 面板内部数据为动态加载数据；为较少不必要的请求我们设置用户点击对应列表时请求对应列表下数据；如下代码所示： <el-collapse v-model="activeNames" @change="handleChange" v-loading='companylistLoading'> <el-collapse-item v-for ="(item,index) in comp.
el-table表格高度滚动条频繁出现闪影、抽搐问题
这里是ShareJasmine的博客~
07-23 927
只给el-table设置了max-height，没有设置height，导致表格高度塌陷、el-table表格高度滚动条频繁出现闪影、抽搐问题
获取element-ui的Collapse折叠后高度
前端程序媛_Ying博客
06-26 2204
因为折叠面板使用的是动画,所以要监听动画结束,再获取折叠后的高度,再更新表格的最大高度即可
element-ui 开发 el-collapse-transition 过渡抖动
m0_60370017的博客
10-21 4509
核心：elementui中el-collapse-transition抖动问题 问题：开发过程中，实现过渡效果，使用elementui中el-collapse-transition展开折叠效果时，盒子排版的时候带的有margin/padding之类的样式，会导致下面的内容在过渡完盒子本身高度后产生页面抖动的问题 解决方案：在外层包一层div就好了 .itemInline{ padding: 20px 24px; } .itemInline随便加padding、margin都可以 <
解决elmentplus的NavMenu左侧导航栏折叠后高度留空
a820206256的博客
01-01 860
那么这个问题怎么解决呢？我们通过浏览器查看css属性发现折叠后有一个.el-menu--collapse，没错，肯定就是他了。我们在浏览器给他添加高度试试。但是折叠后，高度就只剩下子菜单的高度了。然后我们在代码里面加上就OK了。左侧导航栏展开的情况下是正常的。添加了高度后发现折叠后正常了。
el-collapse组件数据更新不及时的问题
EVEzzy的博客
07-20 1238
el-collapse绑定了 addArray，在操作时， 展开折叠面板时，addArray更新。但是通过测试发现，el-collapse-item中的item并不会更新数据，只有收起折叠面板时才会更新item数据。方法来强制刷新组件，这样 el-collapse-item 的数据变动会触发重新渲染，确保视图更新及时。
uView（u-collapse）折叠版高度问题
wendy_qx的博客
04-08 4141
uView（u-collapse）折叠版高度问题
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值