关闭过滤后的 v-treeview 节点很慢，有很多项目

Question

我有一个 v-treeview，其中一个节点包含约 2000 个子节点。我需要应用过滤器。当前打开节点大约需要 3 秒。关闭节点大约需要 15 秒。这是不可接受的。

在没有应用过滤器的情况下，几乎可以瞬间打开和关闭它。关闭节点似乎不会再次调用过滤函数。

使用Searching a Directory 示例作为基础可以轻松重现该问题。

我这里有一个 CodePen 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
    },
  },
})

Answer 1

此错误已在 Vuetify 2.3.8 中修复。

https://github.com/vuetifyjs/vuetify/releases/tag/v2.3.8