Vuetify(1.x)数据表在分页期间性能低下

5f0d552i  于 2022-12-27  发布在  Vue.js
关注(0)|答案(1)|浏览(106)

我已经重新设计了一个现有的数据表,这样,每行有更多的列,而不是将不相关的信息聚集在一个列中,而且现在大多数列都是可排序的。
重新设计之后,在数据表中分页(25或50行/页),浏览器现在锁定大约3-5秒,而不是不到1秒。
表中的项来自计算属性。我本打算尝试优化计算值的计算,但分页时,计算属性不会重新计算,因此我不认为这样做有什么意义。我不知道还有什么方法可以再次加快速度。

yi0zb3m4

yi0zb3m41#

回答我自己的问题:
将提供给表的数据放入data()中的变量rows中,而不是放入计算属性中,这使得一切都快得多。
在我的例子中,只有少数地方需要重新计算表数据,所以我添加了一个tableUpdated()方法,它将在需要时更新rows
这一更改不仅加快了分页,还加快了每页的行数、动态添加/删除列以及搜索过滤的速度。

相关问题