Closing a filtered v-treeview node is slow with a lot of items

Viewed 735

I have a v-treeview where a node contains ~2000 children. I need to apply a filter. Opening the node currently takes ~3 seconds. Closing the node takes ~15 seconds. This is unacceptable.

Without the filter applied, opening and closing it nearly instantaneous. Closing the node does not appear to call the filter function again.

The problem is trivially reproducible using the Searching a Directory example as the base.

I have a CodePen here https://codepen.io/james-hudson3010/pen/JjXYgZj

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="500"
    >
      <v-sheet class="pa-4 primary lighten-2">
        <v-text-field
          v-model="search"
          label="Search Company Directory"
          dark
          flat
          solo-inverted
          hide-details
          clearable
          clear-icon="mdi-close-circle-outline"
        ></v-text-field>
        <v-checkbox
          v-model="caseSensitive"
          dark
          hide-details
          label="Case sensitive search"
        ></v-checkbox>
      </v-sheet>
      <v-card-text>
        <v-treeview
          :items="items"
          :search="search"
          :filter="filter"
          :open.sync="open"
        >
        </v-treeview>
      </v-card-text>
    </v-card>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      {
        id: 1,
        name: 'Vuetify Human Resources',
        children: [
          {
            name: 'Core team',
            children: [
              { id: 2, name: 'John-0' },
{ id: 3, name: 'John-1' },
{ id: 4, name: 'John-2' },
{ id: 5, name: 'John-3' },
{ id: 6, name: 'John-4' },
{ id: 7, name: 'John-5' },

// 
// Some items removed due to length
//

{ id: 2000, name: 'John-1998' },
{ id: 2001, name: 'John-1999' },
            ],
          }
        ],
      },
    ],
    open: [1, 2],
    search: null,
    caseSensitive: false,
  }),
  computed: {
    filter () {
      return this.caseSensitive
        ? (item, search, textKey) => item[textKey].indexOf(search) > -1
        : undefined
    },
  },
})
1 Answers
Related