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

新手上路,请多包涵

el-collapse-item 中放一个 el-table, 展开的时候高度先是比表格内容高,然后闪一下突然回到正常的高度, 请问有人遇到过这样的问题么,该如何解决?
如果el-collapse-item中放的是普通的文本或者 就不会出现这个问题

阅读 7.1k
2 个回答
新手上路,请多包涵

解决了吗,我也碰到这个问题了

实际工作中遇到过,两个方法。

方法 1. 去掉 el-collapse 的动画效果


/* .uptClass 类添加在 el-collapse 上 */

.uptClass .collapse-transition {
  -webkit-transition: 0s height, 0s padding-top, 0s padding-bottom;
  transition: 0s height, 0s padding-top, 0s padding-bottom;
}

.uptClass .horizontal-collapse-transition {
  -webkit-transition: 0s width, 0s padding-left, 0s padding-right;
  transition: 0s width, 0s padding-left, 0s padding-right;
}

.uptClass .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transition: 0s;
  transition: 0s;
  opacity: 0;
}

补充:如果 .vue 文件里 style 上有 scoped 记得穿透

方法 2. 将 el-table 替换成普通的 table
....略

推荐问题
宣传栏