问题描述:
用element plus 做得表格,如下图,列数较多,且部分表格内容显示比较复杂,数据量中等的情况下,有一个switch 按钮,切换部分列的显示和隐藏,会发现,切换为显示的时候,会出现明显的卡顿,switch 也会明显卡顿一会之后,才显示成高亮状态。
这是由于表格渲染的列比较多,且部分内容比较复杂,即使数据量算不上多,但渲染出来的DOM数量不少导致的,不过好在这里渲染卡顿不算严重,所以这里没做虚拟表格之类的优化。打算做个loading动画,在切换的时候,显示loading,让用户不会认为点了之后没反应。但加了loading之后,发现切换时loading显示不出来,应该是表格占用了渲染的主进程导致的。
switch切换的时候,就会触发表格重新渲染了,这个问题不太好解决。后想到一种相对可行的方案,如下:
1、将原本绑定isAll (原本控制列是否显示的变量) 变量的switch改成绑定另一个变量fakeIsAll
<el-switch
v-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还是会卡顿。
不做虚拟表格优化的情况下,道友们时候有更好的方法,欢迎讨论。。。。