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"
>
<el-table-column
prop="key"
label="键"
>
</el-table-column>
<el-table-column
prop="value"
label="值"
>
</el-table-column>
</el-table>
</div>
</el-collapse-item>
columnspan是什么意思</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