Vue - 表过滤器的性能问题？答案

【问题标题】：Vue - Performance issues on table filters?Vue - 表过滤器的性能问题？
【发布时间】：2021-07-11 03:44:57
【问题描述】：

我正在尝试操作 Vue 表。我有多个过滤器来过滤表的行。

我的过滤器确实在工作，但我遇到了性能问题。

问题是：当过滤器删除行时，一切都很好。但是当它添加行时，性能真的下降了......

我的意思是，我只有 50 行，显示它们需要 2 秒，从 0 行到 50 行...

我想我错过了什么......

这是我的代码

我有一个输入来过滤名称字段（这是简化的，我实际上有 4 个过滤器），我过滤计算过滤器的方法 etdLineDisplayed。

这是我的模板：

<input type="text" v-model="filterRow" class="form-control"/>   
<b-table
    :items="etdLineDisplayed"
    :fields="fields"
>
[...]
</b-table>

这是我的物品所在的地方：

computed: {
    etdLineDisplayed() {
        let itemsFiltered = this.filterRow !== '' ? this.etdLinesData.filter(_ => _.name.includes(this.filterRow.toLowerCase()) : this.allItems;
        return itemsFiltered;
    }
},

【问题讨论】：

您是否尝试过使用 b-table 的过滤功能而不是您的？ bootstrap-vue.org/docs/components/table#filtering
是的，我做到了，而且速度也很慢......
你能发布一个小提琴、codepen 或示例吗？

标签： vue.js vuejs2 vue-component bootstrap-vue

【解决方案1】：

不确定性能问题来自哪里，但我知道记忆化对于表格来说是一件非常好的事情，请查看这篇文章：https://www.maxpou.fr/vuejs-performance-improvement-with-memoization

它基本上不会重新计算所有不移动的重型部件，只需将其重新计算。 computed 无法完成的事情，因为你不能给它任何参数，因此依赖 methods..

【讨论】：

【解决方案2】：

https://mmichaelid.medium.com/bootstrap-vue-b-table-rest-api-integration-with-filters-pagination-sorting-and-browser-history-bd6eb8ccdc5f
本文展示了一些过滤分页和排序服务器端使用 Java 和前端使用 Vue 和 b-table。您可以将其用作前面模板的指南。

【讨论】：