vuejs2 - Vuetify 如何改进高级网格渲染

Question

在我的 Vuetifyjs 项目中，我们使用了非常先进的数据网格。从某种意义上说是高级的，它有按钮和菜单项。包含按钮和菜单项的网格的渲染性能让我有些困扰。在某些情况下，渲染大约 40-50 条记录的高级网格需要 700 毫秒。

问题：我可以做些什么来提高渲染速度？

已知解决方案：明显的解决方案是每页有 10 条记录，但现在这是最后的手段

旁注：没有按钮和菜单项的普通网格性能很好

看看我的codepen 示例。它仍然非常简单，您可以在清除数据并再次显示时清楚地看到缓慢的渲染。

<div id="app">
  <v-app id="inspire">
    Total Records: {{desserts.length}}
    <v-btn @click="cleanData()">Clean Data</v-btn>
    <v-btn @click="resetData()">Reset Data</v-btn>
    <v-data-table :headers="headers" :items="desserts" class="elevation-1" hide-actions>
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
        <td class="text-xs-right">
          <v-menu bottom origin="center center" transition="scale-transition" offset-y>
          <v-btn color="secondary" medium slot="activator">
            <v-icon>more_horiz</v-icon>
          </v-btn>

          <v-list>
            <v-list-tile v-for="item in menuItems" :key="item">
              <v-list-tile-title>{{ item }}</v-list-tile-title>
            </v-list-tile>
          </v-list>
          </v-menu>

          <v-tooltip top>
                                        <v-btn
                                            color="success"
                                            slot="activator"
                                            medium
                                            @click.stop="
                                            "
                                        >
                                            <v-icon>arrow_forward</v-icon>
                                        </v-btn>
                                        <span>Move to next status</span>
                                    </v-tooltip>
        </td>
      </template>
    </v-data-table>
  </v-app>
</div>

标签： vuejs2vuetify.js