当前位置: 首页 > 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.dtcms.com/a/51932.html

相关文章:

  • 【Qt QML】Loader动态加载组件(续)
  • 《安富莱嵌入式周报》第351期:DIY半导体制造,工业设备抗干扰提升方法,NASA软件开发规范,小型LCD在线UI编辑器,开源USB PD电源,开源锂电池管理
  • Web后端开发-总结
  • 多线程-JUC源码
  • 利用opencv_python(pdf2image、poppler)将pdf每页转为图片
  • 2025年夸克网盘自动签到程序,验证通过!
  • android App主题颜色动态更换
  • IO进程线程3
  • 【AD】5-3 PCB板框的内缩与外扩
  • OpenBMC:BmcWeb app获取socket
  • 嵌入式 ARM Linux 系统构成(1):Bootloader层
  • oracle通过dmp导入数据
  • PHP之运算符
  • python-串口助手(OV7670图传)
  • 文献分享: ConstBERT固定数目向量编码文档
  • java 查找连个 集合的交集部分数据
  • 生命周期总结(uni-app、vue2、vue3生命周期讲解)
  • Linux总结
  • 进程间通信
  • 【单片机】嵌入式系统设计流程
  • 【仿muduo库one thread one loop式并发服务器实现】
  • 美股回测:历史高频分钟数据的分享下载与策略解析20250305
  • 配置hosts
  • 【软考-架构】9.2、摘要-签名-PKI-访问控制-DOS-欺骗技术
  • SQL注入的原理及详细运用
  • Golang依赖注入实战:从容器管理到应用实践
  • 240 Vocabulary Words Kids Need to Know
  • 计算机组成原理:计算机系统层次结构
  • Redis 各数据类型使用场景详解
  • javaSE基础