问题描述：

        用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还是会卡顿。

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