el-collapse折叠面板组件中的面板内容是el-table,展开的时候高度异常
Posted dapengfly
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了el-collapse折叠面板组件中的面板内容是el-table,展开的时候高度异常相关的知识,希望对你有一定的参考价值。
问题描述:
element-ui折叠面板,el-collapse-item 中放一个 el-table, 展开的时候高度先是比表格内容高,然后闪一下突然回到正常的高度;
如果el-collapse-item中放的是普通的文本就不会出现这个问题。
代码展示:
<el-collapse v-model="activeNames" @change="handleCollapse" :class="‘table-box‘"> <!-- 标签 --> <el-collapse-item :title="‘‘" name="collapseTag"> <template slot="title"> <span class="title">标签</span> <span class="sub_title"></span> </template> <div> <el-table :data="form.tags" border tooltip-effect="dark" style="width: 100%"> <el-table-column prop="key" label="键" > </el-table-column> <el-table-column prop="value" label="值" > </el-table-column> </el-table> </div> </el-collapse-item> </el-collapse>
解决方法:
取消折叠面板动画
//折叠面板 取消动画 .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,展开的时候高度异常的主要内容,如果未能解决你的问题,请参考以下文章
您知道任何具有水平可折叠窗口或面板等功能的 flex 组件吗?
jquery mobile外部面板中的可折叠列表视图无法正确显示