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

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

news 来源：原创 2025/5/16 20:35:30

调用控制台发现是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'
    });
};