作者:宇智臣风 | 来源:互联网 | 2023-09-10 16:31
问题描述:element-ui折叠面板,el-collapse-item中放一个el-table,展开的时候高度先是比表格内容高,然后闪一下突然回到正常的高度;如果el-colla
问题描述:
element-ui折叠面板,el-collapse-item 中放一个 el-table, 展开的时候高度先是比表格内容高,然后闪一下突然回到正常的高度;
如果el-collapse-item中放的是普通的文本就不会出现这个问题。
代码展示:
标签
table
:data="form.tags"
border
tooltip-effect="dark"
style="width: 100%">
column
prop="key"
label="键"
>
column
prop="value"
label="值"
>
解决方法:
取消折叠面板动画
//折叠面板 取消动画
.collapse-transition
-webkit-transition: 0s height, 0s padding-top, 0s padding-bottom;
transition: 0s height, 0s padding-top, 0s padding-bottom
.horizontal-collapse-transition
-webkit-transition: 0s width, 0s padding-left, 0s padding-right;
transition: 0s width, 0s padding-left, 0s padding-right
.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow
-webkit-transition: 0s;
transition: 0s;
opacity: 0
el-collapse折叠面板组件中的面板内容是el-table,展开的时候高度异常