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

发布于 2022-09-11 23:29:08 字数 134 浏览 14 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

生生漫 2022-09-18 23:29:08

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

奶气 2022-09-18 23:29:08

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

方法 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
....略

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文