Question

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

问题：如何提高渲染速度？

已知的解决方案：显而易见的解决方案是每页10条记录，但目前为止是不得已的方法

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

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

<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>

验证如何改善高级网格渲染

0 个答案: