当前位置: 首页 > 知识库问答 >
问题:

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

缪风史
2024-08-15

vue3+element plus项目,当使用了el-table的展开行时,想要实现全部展开功能,在全部展开时会卡顿,阻塞线程。
使用了:expand-row-keys="expandRowArr",通过将key全部插入数组expandRowArr.value = commentList.value.map(item => item.commentIndex),来实现全部展开的效果。
最开始使用的是toggleRowExpansion方法,但是因为在数据更新时会让所有展开行恢复初始状态,从而导致折叠,因此放弃了

目前的情况是如果数据量比较多的话,全部展开就会有很明显的卡顿,我希望设置一个loading来等待展开结束,但是在进行全部展开时会阻塞,导致无法正常添加loading。想问下这块该如何实现呢?

共有1个答案

秦育
2024-08-15

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

 类似资料:
  • 数据结构如下 tabledata: [ 效果图 能否实现这样的效果呢

  • vue3+element-plus el-table选择框变成心形 网上搜索

  • 问题内容: 当我从HTML或XML刮取几个相关的节点以提取文本时,所有文本都合并为一个长字符串,从而无法恢复单个文本字符串。 例如: 但是我想要的是: 抓取XML时也会发生相同的情况: 为什么会发生这种情况,我该如何避免呢? 问题答案: 这是一个容易解决的问题,其原因是没有阅读有关在NodeSet和Node(或Element)上使用时的行为的文档。 该节点集文档表示将: 获取所有包含的Node对象

  • 问题内容: 如何避免使用!进行力解开的操作,因为使用此方法通常是错误的选择。 如下所示的代码中有什么更好的选择,使用它可以使代码看起来更简单,并且可以通过if检查变量!被调用永远不会为零,因此不会崩溃。 我的教练向我们介绍了bang(!)运算符,然后告诉我们不要再使用它了。告诉我们原因,如果可选为nil,它将使我们的应用程序崩溃。 但是,我发现自己处于类似bang运算符似乎是最简洁和最安全的选择的

  • 请问各位大佬们 如何通过vue3+element-plus实现el-table的子列表懒加载???该如何实现点击左侧的箭头实现子节点的懒加载?不然数据多的情况下 会导致卡顿。求指教,谢谢!!! 这是后台返回的数据格式:

  • elementUI el-drawer 点击右上角 关闭按钮会卡顿,添加动画这之后 edge浏览器可以了,谷歌上还是卡。这个怎么解决

  • element-ui中的el-card卡片组件内容为什么不换行,当内容过长时,后面部分直接看不见了,怎么让内容自动换行呢?

  • Element-UI table reserve-selection 如何生效? 我的在线代码 第一页选中了 1,2,3条 此时切换到第二页再切回来,为什么还是没有选中? 是我理解有问题吗? https://codepen.io/firstblood93/pen/vYMOeyN