Vuetify, как улучшить предварительную визуализацию сетки - PullRequest
0 голосов
/ 08 февраля 2019

В моих проектах Vuetifyjs мы используем довольно продвинутые сетки данных.Продвинутый в некотором смысле, он имеет кнопки и пункты меню.Что-то меня немного беспокоит в производительности рендеринга для сеток, которые содержат кнопки и пункты меню.В некоторых случаях для рендеринга сетки с 40-50 записями требуется до 700 мс.

Вопрос : Что я могу сделать, чтобы улучшить скорость рендеринга?

Известное решение : Очевидное решение состоит в том, чтобы иметь 10 записей на странице, но на данный момент это последнее средство

Примечание для стороны : Производительность обычных сеток без кнопок и элементов меню равна отлично

Взгляните на мой пример кодепа .Это все еще довольно просто, и вы можете ясно видеть медленный рендеринг, когда очищаете данные, покажите их снова.

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...