当前位置: 首页 > news >正文

vxe-table开启表尾和el-collapse-transition不兼容,动画卡顿

调用控制台 发现是el-collapse-transition内置的计算高度函数计算的高度总是会高一点

直接放弃使用el-collapse-transition

 使用下面的div包裹住vxe-table  我的table是渲染出来的会有多个

<el-button @click="group.messShow = !group.messShow" type="text">{{group.messShow ? "收起" : "展开"}}
</el-button><div class="collapse-content" :class="{ 'is-collapsed': !group.messShow }">
</div>
.collapse-content {overflow: hidden;
//直接找的element的过渡动画transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}.collapse-content.is-collapsed {height: 0 !important;padding-top: 0;padding-bottom: 0;
}

写一个计算高度的函数

//注意调用函数的时机是在页面完全加载完成 建议直接使用setTimeout 
//使用nextTick会导致高度获取的不完整
const setHeight = () => {let elements = document.querySelectorAll('.collapse-content');elements.forEach(function (element) {let height = element.offsetHeight;element.style.height = height + 'px'});
};

http://www.lryc.cn/news/546991.html

相关文章:

  • 康谋分享 | 3DGS:革新自动驾驶仿真场景重建的关键技术
  • golang学习笔记——go语言安装及系统环境变量设置
  • Redis|集群 Cluster
  • 解锁MacOS开发:环境配置与应用开发全攻略
  • 如何通过卷积神经网络(CNN)有效地提取图像的局部特征,并在CIFAR-10数据集上实现高精度的分类?
  • 监听 RabbitMQ 延时交换机的消息数、OpenFeign 路径参数传入斜杠无法正确转义
  • 希音(Shein)前端开发面试题集锦和参考答案
  • python全栈-Linux基础
  • DeepSeek R1助力,腾讯AI代码助手解锁音乐创作新
  • Git安装与配置
  • 【Linux】自定协议和序列化与反序列化
  • C++基础系列【19】运算符重载
  • Python-04BeautifulSoup网络爬虫
  • 芯科科技通过全新并发多协议SoC重新定义智能家居连接
  • python-leetcode-零钱兑换 II
  • 【RabbitMQ】Producer之TTL过期时间 - 基于AMQP 0-9-1
  • 演示汉字笔顺的工具
  • JVM简单了解
  • 【CSS—前端快速入门】CSS 选择器
  • 【MYSQL数据库异常处理】执行SQL语句报超时异常
  • 【Day9】make/makeFile如何让项目构建自动化起飞
  • 【单片机】嵌入式系统的硬件与软件特性
  • C语言学习笔记-初阶(30)深入理解指针2
  • ROM修改进阶教程------修改安卓机型SELinux宽容的几种方式方法 以及第三方系统中如何关闭SELinux宽容
  • 亚马逊云科技Marketplace(中国区)上架专业服务产品, “云生态连接器”价值凸显
  • 【音视频】音频基础
  • 策略模式的C++实现示例
  • 本地部署pangolin获取谱系,从而达到预测新冠的流行趋势
  • 【我的 PWN 学习手札】House of Emma
  • 4 Redis4 List命令类型讲解