欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 创投人物 > 表格多列情况下,loading不显示问题

表格多列情况下,loading不显示问题

2024/11/30 14:36:09 来源:https://blog.csdn.net/supming1/article/details/142030832  浏览:    关键词:表格多列情况下,loading不显示问题

问题描述:

        用element plus 做得表格,如下图,列数较多,且部分表格内容显示比较复杂,数据量中等的情况下,有一个switch 按钮,切换部分列的显示和隐藏,会发现,切换为显示的时候,会出现明显的卡顿,switch 也会明显卡顿一会之后,才显示成高亮状态。

        这是由于表格渲染的列比较多,且部分内容比较复杂,即使数据量算不上多,但渲染出来的DOM数量不少导致的,不过好在这里渲染卡顿不算严重,所以这里没做虚拟表格之类的优化。打算做个loading动画,在切换的时候,显示loading,让用户不会认为点了之后没反应。但加了loading之后,发现切换时loading显示不出来,应该是表格占用了渲染的主进程导致的。

        switch切换的时候,就会触发表格重新渲染了,这个问题不太好解决。后想到一种相对可行的方案,如下:

1、将原本绑定isAll (原本控制列是否显示的变量) 变量的switch改成绑定另一个变量fakeIsAll

<el-switchv-model="fackIsAll"active-text="查看全部"inactive-text="固定列"@change="toggleViewAll"
/>

2、通过setTimeout, 等switch状态切换完,loading显示后,再将fakeIsAll的值赋值给isAll.

const fakeIsAll = ref(false)
function toggleViewAll(){const loading = ElLoading.service({lock: true,background: 'rgba(255, 255, 255, 0)',})setTimeout(()=>{loading.close()},1000)setTimeout(() => {isAll.value = fakeIsAll.value}, 500);}

这样优化后,switch能马上切换状态,loading也能显示出来,不足之处在于,表格渲染期间,loading还是会卡顿。

不做虚拟表格优化的情况下,道友们时候有更好的方法,欢迎讨论。。。。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com