Vue - Performance issues on table filters?

Question

I'm trying to manipulate a Vue table. I've multiple filters to filter table's rows.

My filters are actually working, but I've performance issues.

The problem is : when the filter removes rows, everything is fine. But when it adds rows, performance is really dropping down...

I mean, I only have 50 rows, and it takes 2 seconds to display them, from 0 rows to 50 rows...

I think that I missed something...

This is my code

I've one input to filter on name field (this is simplified, I actually have 4 filters), and I filter on the method etdLineDisplayed which is calculated the filter.

This is my template :

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

And this is where my items are :

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

Have you tried using the b-table's filter functionality instead of yours? bootstrap-vue.org/docs/components/table#filtering — bassxzero

kissu kissu · Accepted Answer · 2021-04-16T09:08:40

Not sure from where you performance issues come from but I know that memoization can be a really good thing to do for tables, check this article: https://www.maxpou.fr/vuejs-performance-improvement-with-memoization

It will essentially not recompute all the non-moving heavy parts, just bring it up back. Thing that cannot be done with computed because you cannot give any params to it, hence relying on methods..

Vue - Performance issues on table filters?

2 Answers