Vue 3 + Element Plus 中 el-table 展开所有行时如何避免卡顿并添加 Loading?-灵析社区

MastFancy

vue3+element plus项目,当使用了el-table的展开行时,想要实现全部展开功能,在全部展开时会卡顿,阻塞线程。 使用了`:expand-row-keys="expandRowArr"`,通过将key全部插入数组`expandRowArr.value = commentList.value.map(item => item.commentIndex)`,来实现全部展开的效果。 最开始使用的是`toggleRowExpansion`方法,但是因为在数据更新时会让所有展开行恢复初始状态,从而导致折叠,因此放弃了 目前的情况是如果数据量比较多的话,全部展开就会有很明显的卡顿,我希望设置一个loading来等待展开结束,但是在进行全部展开时会阻塞,导致无法正常添加loading。想问下这块该如何实现呢?

阅读量:179

点赞量:0

问AI
目前是通过把全部展开的方法通过"toggleRowExpansion"展开,将整个方法放在一个"seTtimeout"里,时间设置为500,这个时候能够先绘制loading,再在展开完成后绘制展开行。在这里我想问一下,更新dom不是微任务吗,按理说应该是在setTimeout之前执行的吧,为什么设置为0的时候,还是会卡住呢?还是说dom更新不是本次tick而是放到了下个tick,那这样的话在更新dom之前不就会经过两次宏任务吗